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

使用 HTML、CSS 和 JavaScript 创建动态打字机效果

本文详细介绍了如何利用 HTML 结构、CSS 动画和 JavaScript 逻辑实现一个动态的打字机文本效果。教程涵盖了 HTML 元素的设置、CSS 光标闪烁动画的实现，以及 JavaScript 中文本数组管理、字符逐一输出和动画循环的关键函数，确保文本内容能被精确地逐字显示并循环播放。

引言

在网页设计中，动态效果能够显著提升用户体验和页面的吸引力。打字机效果（typewriter effect）便是其中一种常见的动画，它模拟了文本逐字输入的过程，常用于突出关键信息、制作引导语或增加页面的趣味性。本教程将指导您如何结合 html、css 和 javascript，从零开始构建一个可自定义的打字机文本动画。

1. HTML 结构：定义文本容器

首先，我们需要一个 HTML 元素来承载将要动态显示的文本。为了精确控制打字机效果的作用范围，我们强烈建议为该元素指定一个唯一的 id。在本例中，我们将使用一个 <h1> 标签，并为其设置 id="typewriter-text"。

<!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> 标签内部可以为空，因为文本内容将完全由 JavaScript 动态生成。

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

打字机效果的一个重要组成部分是文本末尾闪烁的光标。我们可以通过 CSS 来实现这个效果。我们将利用一个 <span> 元素来模拟光标，并通过 CSS 动画使其周期性地改变边框颜色，从而产生闪烁感。

在 JavaScript 中，我们将动态地将这个 <span> 元素添加到当前文本的末尾。为了确保它不会被屏幕阅读器误读为实际文本内容，我们还会添加 aria-hidden="true" 属性。

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

/* style.css */
#typewriter-text {
    font-family: monospace; /* 保持等宽字体，使光标位置稳定 */
    white-space: nowrap; /* 防止文本换行 */
    overflow: hidden; /* 隐藏超出容器的文本，虽然在这里不直接作用于打字机效果 */
    display: inline-block; /* 确保h1可以被span撑开 */
}

#typewriter-text span {
    border-right: .05em solid; /* 光标样式：右边框 */
    animation: caret 1s steps(1) infinite; /* 应用光标闪烁动画 */
}

@keyframes caret {
    50% {
        border-color: transparent; /* 动画50%时，边框变为透明 */
    }
}

登录后复制

border-right: .05em solid;：创建了一个细长的右边框，模拟打字光标。
animation: caret 1s steps(1) infinite;：将名为 caret 的动画应用于光标。
- 1s：动画持续时间为1秒。
- steps(1)：指定动画在一步内完成，这意味着它会立即从一种状态跳到另一种状态，而不是平滑过渡，这对于闪烁效果至关重要。
- infinite：动画无限循环。
@keyframes caret：定义了 caret 动画的关键帧。在动画进行到50%时，光标的边框颜色变为透明，从而实现了闪烁效果。

3. JavaScript 逻辑：核心动画实现

JavaScript 是实现打字机效果的核心。它负责管理要显示的文本内容、逐字输出文本、控制动画速度以及处理文本序列的循环播放。

我们将把所有 JavaScript 代码放在 DOMContentLoaded 事件监听器中，以确保 DOM 完全加载后再执行脚本。

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

查看详情

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

    const targetElement = document.getElementById('typewriter-text'); // 获取目标元素

    /**
     * 实现单个字符串的打字机效果
     * @param {string} text - 要显示的字符串
     * @param {number} i - 当前字符索引
     * @param {function} fnCallback - 文本完成时的回调函数
     */
    function typeWriter(text, i, fnCallback) {
        // 检查文本是否已全部显示
        if (i < text.length) {
            // 将下一个字符添加到目标元素，并附加闪烁光标
            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秒
        }
    }

    /**
     * 启动文本数组的打字机动画序列
     * @param {number} i - dataText 数组的当前索引
     */
    function StartTextAnimation(i) {
        // 如果当前索引超出 dataText 数组范围，则循环回到第一个文本
        if (i >= dataText.length) {
            setTimeout(function() {
                StartTextAnimation(0); // 循环回到数组开头
            }, 20000); // 等待20秒后重新开始整个序列
            return; // 结束当前函数执行
        }

        // 确保 dataText[i] 存在（即不是 undefined）
        if (dataText[i]) {
            // 开始对当前文本进行打字机动画
            typeWriter(dataText[i], 0, function() {
                // 当前文本动画完成后，启动下一个文本的动画
                StartTextAnimation(i + 1);
            });
        }
    }

    // 启动文本动画序列
    StartTextAnimation(0);
});

登录后复制

代码详解：

dataText 数组: 这是一个包含所有要显示文本的字符串数组。您可以根据需要修改其中的内容。
targetElement: 通过 document.getElementById('typewriter-text') 获取到我们之前在 HTML 中定义的 <h1> 元素，确保 JavaScript 精确地操作目标元素。
typeWriter(text, i, fnCallback) 函数:
- 这是实现单个字符串打字机效果的核心函数。
- text.substring(0, i + 1)：截取从字符串开头到当前索引 i 的子字符串，模拟逐字显示。
- '<span aria-hidden="true"></span>'：在当前文本末尾添加一个用于显示闪烁光标的 <span> 元素。aria-hidden="true" 确保了辅助技术（如屏幕阅读器）会忽略这个纯粹用于视觉效果的元素。
- setTimeout(function() { typeWriter(text, i + 1, fnCallback); }, 90);：设置一个定时器，在90毫秒后递归调用 typeWriter 函数，以显示下一个字符。这个延迟决定了打字速度。
- 当 i 等于 text.length 时，表示当前字符串已全部显示完毕。此时，如果提供了 fnCallback（一个回调函数），则在2000毫秒（2秒）后执行它，为用户留出阅读当前文本的时间。
StartTextAnimation(i) 函数:
- 这个函数负责管理 dataText 数组中字符串的序列播放。
- if (i >= dataText.length)：检查当前索引 i 是否超出了 dataText 数组的范围。如果超出，说明所有文本都已播放一遍，此时会设置一个20秒的延迟，然后从数组的第一个文本 (StartTextAnimation(0)) 重新开始整个动画序列。
- if (dataText[i]): 确保当前 dataText[i] 存在，防止因索引越界导致错误（尽管前面的 if 语句已经处理了这种情况，但这是一个良好的防御性编程习惯）。
- typeWriter(dataText[i], 0, function(){ StartTextAnimation(i + 1); });：调用 typeWriter 函数来显示 dataText 数组中的当前字符串。当 typeWriter 完成其任务后，它会执行提供的回调函数，该回调函数会调用 StartTextAnimation(i + 1) 来启动数组中的下一个字符串的动画。
StartTextAnimation(0);: 在 DOMContentLoaded 事件监听器内部，调用 StartTextAnimation(0) 来启动整个打字机动画序列，从 dataText 数组的第一个文本开始。

4. 完整示例代码

将上述 HTML、CSS 和 JavaScript 代码分别保存为 index.html、style.css 和 script.js，并确保它们在同一目录下。

index.html

<!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>

登录后复制

style.css

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    background-color: #282c34;
    color: #61dafb;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

#typewriter-text {
    font-size: 3em;
    font-family: monospace;
    white-space: nowrap;
    overflow: hidden;
    display: inline-block;
    border-right: .15em solid orange; /* 初始光标，将被JS中的span替换 */
    padding-right: 0.15em; /* 防止文本与光标过于接近 */
}

#typewriter-text span {
    border-right: .05em solid; /* 实际闪烁光标样式 */
    animation: caret 1s steps(1) infinite;
}

@keyframes caret {
    50% {
        border-color: transparent;
    }
}

登录后复制

script.js

document.addEventListener('DOMContentLoaded', function(event) {
    const dataText = [
        "VISIBILITÀ.",
        "NUOVI INGAGGI.",
        "NUOVI FAN.",
        "PIÙ VISIBILITÀ!",
        "SUCCESSO!"
    ];

    const targetElement = document.getElementById('typewriter-text');

    function typeWriter(text, i, fnCallback) {
        if (i < text.length) {
            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);
        }
    }

    function StartTextAnimation(i) {
        if (i >= dataText.length) {
            setTimeout(function() {
                StartTextAnimation(0);
            }, 20000);
            return;
        }

        if (dataText[i]) {
            typeWriter(dataText[i], 0, function() {
                StartTextAnimation(i + 1);
            });
        }
    }

    StartTextAnimation(0);
});

登录后复制

5. 注意事项与优化

性能: 对于大量文本或复杂动画，innerHTML 的频繁操作可能影响性能。在更复杂的场景中，可以考虑使用 DOM 片段（DocumentFragment）或虚拟 DOM 库。
可访问性: aria-hidden="true" 对光标 <span> 的使用是一个很好的实践，因为它确保了屏幕阅读器不会将闪烁的光标读作实际内容。
自定义:
- 打字速度: 调整 typeWriter 函数中的 setTimeout 延迟（例如 90 毫秒）可以改变字符显示的速度。
- 文本切换延迟: 调整 typeWriter 函数中回调前的 setTimeout 延迟（例如 2000 毫秒）可以改变每个文本显示完毕后的等待时间。
- 循环延迟: 调整 StartTextAnimation 函数中循环回开头前的 setTimeout 延迟（例如 20000 毫秒）可以改变整个序列重新开始前的等待时间。
- 光标样式: 修改 style.css 中 span 的 border-right 和 caret 动画可以改变光标的外观和闪烁方式。
目标元素: 如果需要对多个元素应用打字机效果，可以封装这些函数，使其接受目标元素的 id 或引用作为参数，或者为每个元素创建独立的实例。
CSS white-space: nowrap; 和 overflow: hidden;: 这些属性可以防止文本在打字过程中换行或超出容器，保持效果的整洁。