使用HTML、CSS和JavaScript实现动态打字机文本效果-js教程-PHP中文网

使用HTML、CSS和JavaScript实现动态打字机文本效果

本文详细介绍了如何利用HTML结构、CSS动画和JavaScript逻辑协同工作，创建出引人注目的打字机文本效果。教程涵盖了文本逐字显示、光标闪烁动画以及多段文本循环播放的核心实现原理与完整代码示例，旨在帮助开发者轻松为网页添加动态交互性文本。

1. 概述

打字机效果是一种常见的网页动态文本展示方式，它模拟了文字逐个字符出现的动画，并通常伴随着一个闪烁的光标，能够有效吸引用户注意力。本教程将指导您如何通过html定义文本容器、css实现光标动画以及javascript控制文本输入逻辑，来构建一个功能完善且可循环的打字机效果。

2. HTML结构

首先，我们需要一个HTML元素作为文本的容器。为了精确控制打字机效果的目标，建议为该元素分配一个唯一的ID。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>打字机效果演示</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1 id="typewriter-text"></h1>
    <script src="script.js"></script>
</body>
</html>

登录后复制

在这个示例中，我们创建了一个空的<h1>标签，并为其指定了id="typewriter-text"。所有动态生成的文本都将显示在这个元素中。

3. CSS样式：实现闪烁光标

打字机效果的关键之一是闪烁的光标。我们可以通过CSS的border-right属性和@keyframes动画来实现这一效果。当JavaScript逐字显示文本时，会在当前文本后添加一个<span>标签，这个<span>标签将作为我们的光标。

/* style.css */
body {
    font-family: 'Arial', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
    color: #333;
}

#typewriter-text {
    font-size: 3em;
    white-space: nowrap; /* 防止文本换行 */
    overflow: hidden; /* 隐藏超出容器的文本，配合打字机效果 */
    margin: 0;
    padding: 0;
}

/* 光标样式 */
#typewriter-text span {
    border-right: .08em solid; /* 光标的宽度和颜色 */
    animation: caret 1s steps(1) infinite; /* 光标闪烁动画 */
    display: inline-block; /* 确保span能正确显示border */
    vertical-align: middle; /* 垂直对齐光标 */
    margin-left: 2px; /* 光标与文本的间距 */
}

/* 光标闪烁动画 */
@keyframes caret {
    50% {
        border-color: transparent; /* 动画到一半时，光标透明 */
    }
}

登录后复制

border-right: .08em solid;：创建了一个右边框作为光标。.08em定义了光标的宽度。
animation: caret 1s steps(1) infinite;：应用了一个名为caret的动画。
- 1s：动画持续时间为1秒。
- steps(1)：动画在两个离散的步骤之间切换，即从显示到隐藏，再从隐藏到显示，模拟闪烁效果。
- infinite：动画无限循环。
@keyframes caret：定义了caret动画，在50%的时间点将border-color设置为transparent，从而实现闪烁。

4. JavaScript逻辑：实现文本输入与循环

JavaScript是实现打字机效果的核心。它负责逐个字符地显示文本、控制显示速度以及在多段文本之间进行切换和循环。

立即学习“Java免费学习笔记（深入）”；

绘ai

ai绘图提示词免费分享

153

查看详情

// script.js
document.addEventListener('DOMContentLoaded', function(event) {
  // 定义要进行打字机效果的文本数组
  var dataText = [
    "VISIBILITÀ.",
    "NUOVI INGAGGI.",
    "NUOVI FAN.",
    "PIÙ VISIBILITÀ!",
    "SUCCESSO!"
  ];

  // 获取目标H1元素
  var targetElement = document.querySelector("#typewriter-text");

  /**
   * 逐字显示单个文本字符串
   * @param {string} text - 要显示的文本
   * @param {number} i - 当前字符索引
   * @param {function} fnCallback - 文本显示完成后的回调函数
   */
  function typeWriter(text, i, fnCallback) {
    // 检查文本是否已全部显示
    if (i < text.length) {
      // 将当前字符添加到目标元素，并附加一个用于光标的<span>
      targetElement.innerHTML = text.substring(0, i + 1) + '<span aria-hidden="true"></span>';

      // 设置延时，然后递归调用自身以显示下一个字符
      setTimeout(function() {
        typeWriter(text, i + 1, fnCallback);
      }, 90); // 每个字符的显示间隔，可调整
    }
    // 如果文本已全部显示，且存在回调函数，则在延时后调用回调
    else if (typeof fnCallback === 'function') {
      setTimeout(fnCallback, 2000); // 文本显示完毕后等待2秒，可调整
    }
  }

  /**
   * 启动文本动画，循环播放dataText数组中的文本
   * @param {number} i - dataText数组的当前索引
   */
  function StartTextAnimation(i) {
    // 检查当前索引的文本是否存在
    if (i < dataText.length) {
      // 文本存在，开始打字机动画
      typeWriter(dataText[i], 0, function() {
        // 当前文本动画完成后，启动下一个文本的动画
        StartTextAnimation(i + 1);
      });
    }
    // 如果所有文本都已播放完毕，则在延时后从头开始循环
    else {
      setTimeout(function() {
        StartTextAnimation(0); // 循环回到第一个文本
      }, 20000); // 所有文本播放完后等待20秒再重新开始，可调整
    }
  }

  // 页面加载完成后，启动文本动画
  StartTextAnimation(0);
});

登录后复制

JavaScript代码详解：

DOMContentLoaded事件监听器：确保在DOM完全加载后再执行JavaScript代码，避免因元素未加载而导致的错误。
dataText数组：存储所有需要进行打字机效果的文本字符串。您可以根据需要修改或扩展此数组。
targetElement：通过document.querySelector("#typewriter-text")精确地选择了HTML中带有id="typewriter-text"的元素，而不是选择所有<h1>标签，这解决了原始问题中提到的“只针对特定h1”的需求。
typeWriter(text, i, fnCallback)函数：
- 这是一个递归函数，负责逐个字符地显示text字符串。
- text.substring(0, i + 1)：截取从字符串开头到当前索引i的子字符串，模拟字符逐个出现。
- +'<span aria-hidden="true"></span>'：在当前文本末尾添加一个<span>标签，这个标签会通过CSS样式显示为闪烁的光标。aria-hidden="true"是为了提高可访问性，告诉屏幕阅读器忽略这个纯粹用于视觉效果的元素。
- setTimeout(..., 90)：设置一个延时，然后再次调用typeWriter函数来显示下一个字符。90毫秒是每个字符之间的间隔，您可以根据需要调整来改变打字速度。
- 当所有字符都显示完毕（i >= text.length）时，如果提供了fnCallback函数，则在2000毫秒后调用它。这个回调机制用于通知外部函数当前文本已完成显示。
StartTextAnimation(i)函数：
- 负责遍历dataText数组，依次播放每个文本的打字机动画。
- if (i < dataText.length)：检查当前索引i是否在dataText数组的有效范围内。
- typeWriter(dataText[i], 0, function(){ StartTextAnimation(i + 1); });：调用typeWriter函数显示当前索引的文本。当typeWriter完成后，其回调函数会触发，进而调用StartTextAnimation(i + 1)来播放数组中的下一个文本。
- else块：当所有文本都已播放完毕时，进入此分支。setTimeout(function() { StartTextAnimation(0); }, 20000);会在20000毫秒（20秒）后重新启动动画，从dataText数组的第一个文本开始循环播放。这个延时也可以根据需求调整。
StartTextAnimation(0)：在DOMContentLoaded事件监听器内部，首次调用StartTextAnimation(0)来启动整个打字机动画序列。

5. 完整示例代码

为了方便您测试，这里提供一个完整的HTML文件，包含了上述所有HTML、CSS和JavaScript代码。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>打字机效果演示</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
            color: #333;
        }

        #typewriter-text {
            font-size: 3em;
            white-space: nowrap; /* 防止文本换行 */
            overflow: hidden; /* 隐藏超出容器的文本，配合打字机效果 */
            margin: 0;
            padding: 0;
        }

        /* 光标样式 */
        #typewriter-text span {
            border-right: .08em solid; /* 光标的宽度和颜色 */
            animation: caret 1s steps(1) infinite; /* 光标闪烁动画 */
            display: inline-block; /* 确保span能正确显示border */
            vertical-align: middle; /* 垂直对齐光标 */
            margin-left: 2px; /* 光标与文本的间距 */
        }

        /* 光标闪烁动画 */
        @keyframes caret {
            50% {
                border-color: transparent; /* 动画到一半时，光标透明 */
            }
        }
    </style>
</head>
<body>
    <h1 id="typewriter-text"></h1>

    <script>
        document.addEventListener('DOMContentLoaded', function(event) {
            // 定义要进行打字机效果的文本数组
            var dataText = [
                "VISIBILITÀ.",
                "NUOVI INGAGGI.",
                "NUOVI FAN.",
                "PIÙ VISIBILITÀ!",
                "SUCCESSO!"
            ];

            // 获取目标H1元素
            var targetElement = document.querySelector("#typewriter-text");

            /**
             * 逐字显示单个文本字符串
             * @param {string} text - 要显示的文本
             * @param {number} i - 当前字符索引
             * @param {function} fnCallback - 文本显示完成后的回调函数
             */
            function typeWriter(text, i, fnCallback) {
                // 检查文本是否已全部显示
                if (i < text.length) {
                    // 将当前字符添加到目标元素，并附加一个用于光标的<span>
                    targetElement.innerHTML = text.substring(0, i + 1) + '<span aria-hidden="true"></span>';

                    // 设置延时，然后递归调用自身以显示下一个字符
                    setTimeout(function() {
                        typeWriter(text, i + 1, fnCallback);
                    }, 90); // 每个字符的显示间隔，可调整
                }
                // 如果文本已全部显示，且存在回调函数，则在延时后调用回调
                else if (typeof fnCallback === 'function') {
                    setTimeout(fnCallback, 2000); // 文本显示完毕后等待2秒，可调整
                }
            }

            /**
             * 启动文本动画，循环播放dataText数组中的文本
             * @param {number} i - dataText数组的当前索引
             */
            function StartTextAnimation(i) {
                // 检查当前索引的文本是否存在
                if (i < dataText.length) {
                    // 文本存在，开始打字机动画
                    typeWriter(dataText[i], 0, function() {
                        // 当前文本动画完成后，启动下一个文本的动画
                        StartTextAnimation(i + 1);
                    });
                }
                // 如果所有文本都已播放完毕，则在延时后从头开始循环
                else {
                    setTimeout(function() {
                        StartTextAnimation(0); // 循环回到第一个文本
                    }, 20000); // 所有文本播放完后等待20秒再重新开始，可调整
                }
            }

            // 页面加载完成后，启动文本动画
            StartTextAnimation(0);
        });
    </script>
</body>
</html>

登录后复制

6. 注意事项与优化

目标元素选择器：务必使用精确的选择器（如#typewriter-text）来定位您的文本容器，而不是泛泛地选择标签名（如h1），以避免影响页面上其他同类型元素。
动画速度调整：
- typeWriter函数中的setTimeout延时（90毫秒）控制着字符输入的快慢。
- typeWriter函数结束后的setTimeout延时（2000毫秒）控制着每段文本显示完毕后到下一段开始前的等待时间。
- StartTextAnimation函数循环结束后setTimeout延时（20000毫秒）控制着所有文本循环一遍后到重新开始前的等待时间。
- 根据您的设计需求，灵活调整这些数值。
文本内容管理：dataText数组是您管理打字机文本内容的中心。您可以轻松地添加、修改或删除其中的文本。
可访问性：在光标<span>标签上添加aria-hidden="true"属性是一个良好的实践，它告诉屏幕阅读器忽略此元素，因为它纯粹是视觉效果，对理解内容没有帮助。
CSS white-space 和 overflow：white-space: nowrap;确保文本在打字过程中不会自动换行，overflow: hidden;则在文本超出容器时隐藏，这对于打字机效果的视觉呈现至关重要。
性能考虑：对于大量文本或非常频繁的动画，可以考虑使用requestAnimationFrame代替setTimeout来获得更平滑的动画效果，尽管对于打字机效果这种相对简单的动画，setTimeout通常足够。