如何用HTML、CSS和JavaScript实现打字机效果及相关问题解决

一、精准选择指定h1元素 #

你的HTML里已经给目标h1加了id="demo"，但原JS代码用document.querySelector("h1")会选中页面中第一个h1元素，若页面存在多个h1就会出错。直接用id选择器就能精准定位：
把document.querySelector("h1")改成document.getElementById("demo")（或document.querySelector("#demo")），确保只操作你需要的那个h1。

二、实现打字机循环逻辑 #

原代码的StartTextAnimation函数存在逻辑错误，导致循环可能失效。正确的循环逻辑应该是：

1. 逐个遍历dataText数组中的文本，完成每一段的打字动画
2. 当所有文本都打完一遍后，等待一段时间，再从第一个文本重新开始循环

修正后的核心逻辑：

• 当索引i超出数组长度时，重置为0，延迟后重新启动动画
• 每打完一段文本，触发回调进入下一段的打字流程

完整修正代码 #

HTML #

<h1 id="demo">hello</h1>

CSS #

#demo span {
  border-right: .05em solid;
  animation: caret 1s steps(1) infinite;
}

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

（注：把CSS选择器改成#demo span，避免影响页面其他无关span元素）

JavaScript #

document.addEventListener('DOMContentLoaded', function(event) {
  // 打字机展示的文本数组
  var dataText = ["VISIBILITÀ.", "NUOVI INGAGGI.", "NUOVI FAN.", "PIÙ VISIBILITÀ!", "SUCCESSO!"];

  // 单段文本的打字逻辑
  function typeWriter(text, i, fnCallback) {
    if (i < text.length) {
      // 精准获取目标h1，添加当前字符和光标
      document.getElementById("demo").innerHTML = text.substring(0, i + 1) + '<span aria-hidden="true"></span>';

      // 延迟90ms后继续输入下一个字符
      setTimeout(function() {
        typeWriter(text, i + 1, fnCallback);
      }, 90);
    } else if (typeof fnCallback === 'function') {
      // 单段文本打完后，延迟2秒触发下一段
      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);
});

关键逻辑说明 #

• 精准选择h1：通过id="demo"和getElementById，确保只操作目标元素，不会干扰页面其他h1
• 循环逻辑：当索引超出数组长度时，触发延迟重置为0，实现无限循环；每段文本打完后等待2秒切换，全部遍历完成后等待20秒再重新开始循环

内容的提问来源于stack exchange，提问作者Simone Cardillo