首页 > 文章 > 前端

HTML打字机效果实现教程

时间：2025-11-01 22:45:58 470浏览收藏

想为你的网页增添趣味性吗？本文将详细介绍如何使用HTML、CSS和JavaScript实现吸睛的**HTML打字机效果**。通过JavaScript定时器，我们可以让文本像打字一样逐字显示，结合CSS光标动画，打造更逼真的效果。本文提供可直接运行的示例代码，展示了如何利用`setTimeout`函数，每隔100ms向页面元素追加字符，最终呈现“Hello！欢迎来到我的网页。”。此外，我们还探讨了如何扩展打字机效果，使其支持多行文本、自定义打字速度，甚至模拟删除重打功能，让你的网页更具吸引力。了解**HTML打字机效果实现方法**，提升用户体验，让你的网站脱颖而出！

使用JavaScript定时器逐字添加字符，结合CSS光标动画实现打字机效果。示例中通过setTimeout每100ms向页面元素追加一个字符，直至完整显示“Hello！欢迎来到我的网页。”，并支持扩展多行文本、调节速度与删除重打功能。

怎么在HTML中插入打字机效果_HTML JavaScript逐字显示动画实现

要在HTML中实现打字机效果，也就是让文字像打字一样逐字显示，可以通过JavaScript控制文本的逐个输出。这种动画常用于欢迎语、标题展示或引导性内容，增强页面的交互感。

基本原理

打字机动画的核心思路是：

定义一段要显示的完整文本
通过JavaScript定时器（如 setTimeout 或 setInterval）逐个添加字符到页面元素中
每过一定时间（例如100毫秒）显示下一个字符，直到全部显示完毕

实现步骤

下面是一个简单可运行的示例：

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8" />
  <title>打字机效果</title>
  <style>
    #typewriter {
      font-size: 18px;
      font-family: monospace;
      white-space: nowrap;
      border-right: 2px solid #000;
      width: 0;
      overflow: hidden;
      animation: blink 0.8s step-end infinite;
    }
    @keyframes blink {
      from, to { border-color: transparent; }
      50% { border-color: #000; }
    }
  </style>
</head>
<body>
  <div id="typewriter"></div>

  <script>
    const text = "Hello！欢迎来到我的网页。";
    const typewriter = document.getElementById("typewriter");
    let index = 0;

    function type() {
      if (index < text.length) {
        typewriter.textContent += text.charAt(index);
        index++;
        setTimeout(type, 100); // 每100ms打一个字
      }
    }

    // 页面加载完成后开始打字
    window.onload = type;
  </script>
</body>
</html>

增强功能建议

你可以根据需要扩展功能：

支持多行文本：用数组存储多句话，前一句打完再打下一句
控制光标闪烁：使用CSS动画实现更自然的光标效果（如上例中的 @keyframes blink）
可配置速度：把打字间隔设为变量，方便调整快慢
支持删除重打：模拟真实打字机，打错后退格重写，可用反向定时器清除字符

注意事项

实际使用时注意以下几点：

避免在移动设备上设置过快的打字速度，影响阅读体验
如果文本较长，考虑提供“跳过动画”按钮
SEO角度：搜索引擎可能无法读取动态生成的文本，重要信息建议仍以静态HTML为主

基本上就这些。这个效果不复杂但容易忽略细节，比如光标样式和字符延迟的协调。只要掌握好定时器和DOM操作，就能轻松实现生动的打字机动画。

理论要掌握，实操不能落！以上关于《HTML打字机效果实现教程》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！

JavaScript setTimeout 逐字显示 HTML打字机效果 CSS光标动画