在 HTML 元素中逐字母显示字母 - HTML

简介

在 HTML 元素中逐字母显示字母是一种动画效果，通常用于吸引用户的注意力，增强网站的交互性。这种效果通过 JavaScript 来实现，将一段文本逐字逐字地显示出来。

实现方法

HTML Markup

在 HTML 文件中，你需要使用一个空的 span 元素来容纳逐字逐字显示的文本。

<div class="type-wrap">
  <span class="output"></span>
</div>

CSS 样式

将 span 元素的 opacity 属性设置为 0，让它隐藏在 HTML 元素中。

output {
  opacity: 0;
  visibility: hidden;
}

JavaScript 代码

使用 JavaScript 代码来逐字逐字显示文本。你需要将要显示的文本储存在一个变量中，然后一次显示它的每一个字母。

function typeEffect(element, speed) {
  var text = element.innerHTML;
  element.innerHTML = "";

  var i = 0;
  var timer = setInterval(function() {
    if (i < text.length) {
      element.append(text.charAt(i));
      i++;
    } else {
      clearInterval(timer);
    }
  }, speed);
}

var typer = document.querySelector(".output");
typeEffect(typer, 50);

总结

通过上述代码，你可以实现在 HTML 元素中逐字逐字地显示文本。当然，你可以根据需要进行更改和扩展，以满足具体的需求。