打字机效果，用20行js就能轻松实现！

用 20 行 JavaScript 代码实现打字机效果：详细指南

前言

在数字世界中，引人注目的内容至关重要。网站和应用程序中的文字是传递信息的强大工具，而动态效果可以进一步提升其吸引力。本文将深入探讨如何利用 JavaScript 实现一种经典的打字机效果，逐字逐句地显示文本，如同老式打字机一样。

技术原理

这个效果的诀窍在于巧妙地结合 HTML 和 CSS 技术。HTML 的 <p> 和 <span> 标签将文本分解成一个个字符，CSS 的 animation 属性控制它们的逐一呈现。

实现步骤

1. HTML 架构

创建 HTML 文档，包含一个 <p> 段落，将文本分解为 <span> 元素，每个 <span> 对应一个字符。

<p>
  <span>H</span>
  <span>e</span>
  <span>l</span>
  <span>l</span>
  <span>o</span>
  <span>,</span>
  <span> </span>
  <span>w</span>
  <span>o</span>
  <span>r</span>
  <span>l</span>
  <span>d</span>
</p>

2. CSS 样式

添加一个样式表，为 <span> 元素设置 animation 属性。animation-delay 控制每个字符出现的延迟时间。

@keyframes type {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

span {
  animation: type 1s steps(1) infinite;
  animation-delay: 100ms;
}

3. JavaScript 代码

在 JavaScript 文件中，根据 <span> 元素的数量动态设置 animation-delay，确保每个字符按顺序出现。

document.addEventListener("DOMContentLoaded", function() {
  var spans = document.querySelectorAll("span");

  for (var i = 0; i < spans.length; i++) {
    spans[i].style.animationDelay = i * 100 + "ms";
  }
});

4. 将 JavaScript 链接到 HTML

将 JavaScript 文件链接到 HTML 文档中，使浏览器在加载页面时执行代码。

效果展示

现在，加载 HTML 页面，你将看到文本就像老式打字机一样逐字逐句地出现。

提示与技巧

• 调整 animation 属性的值，创建不同的效果，如改变字符出现的顺序或方式。
• 使用不同的字体和颜色，美化效果。
• 考虑将这种效果用于幻灯片或需要动态文本显示的情况。

常见问题解答

1. 这个效果是否适用于所有浏览器？

   • 是的，这个效果在所有现代浏览器中都兼容。

2. 我可以同时在多个元素上使用这个效果吗？

   • 可以，只需要为每个元素应用相同的 CSS 样式和 JavaScript 代码即可。

3. 我可以控制字符出现的速度吗？

   • 是的，通过修改 animation-duration 属性，可以控制字符出现的持续时间。

4. 这个效果可以用于移动设备吗？

   • 可以，这个效果在移动设备上同样有效。

5. 是否存在类似于打字机的键盘敲击声效果？

   • 是的，可以使用 JavaScript 或音效库添加键盘敲击声效果。