js实现文字打印效果

最新推荐文章于 2024-03-09 18:12:39 发布

黎枫学长

最新推荐文章于 2024-03-09 18:12:39 发布

阅读量365

点赞数

本文链接：https://blog.csdn.net/qq_64037242/article/details/131334861

版权

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>不断打印文字</title>
</head>
<body>
  <h1 id="text"></h1>
  <script>
    var text = ["这是第一个要打印的文字。",
                "这是第二个要打印的文字。",
                "这是第三个要打印的文字。"]; // 要打印的文字列表
    var index = 0; // 当前文字的索引
    var letterIndex = 0; // 当前文字中字母的索引
    var currentText = text[index]; // 当前要打印的文字
    var intervalId = setInterval(type, 50); // 每50ms打印一个字母
    function type() {
      document.getElementById("text").innerHTML += currentText.charAt(letterIndex);
      letterIndex++;
      if (letterIndex >= currentText.length) {
        clearInterval(intervalId);
        setTimeout(reset, 1500); // 打印完成后1.5s清空文字并重新开始
      }
    }
    function reset() {
      document.getElementById("text").innerHTML = "";
      letterIndex = 0;
      index++;
      if (index >= text.length) {
        index = 0;
      }
      currentText = text[index];
      intervalId = setInterval(type, 50);
    }
  </script>
</body>
</html>