页面加载时文字黑客特效无法运行的问题求助

之前你把代码绑定在h1的onmouseover事件上实现悬停特效，但h1没有onload事件，所以替换后失效；用<h1 onload="text()">也没用，因为这个事件根本不支持在普通元素上用。其实不用大量重写，只要调整触发逻辑就行：

修改后的完整代码 #

<h1 data-value="test">test</H1>
<link rel="stylesheet" href="format.css">

<script>
const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";

// 把原特效逻辑封装成函数，传入要处理的元素
function runHackerEffect(element) {
  let iterations = 0;
  
  const interval = setInterval(() => {
    element.innerText = element.innerText.split("")
      .map((letter, index) => {
          if (index + 4 < iterations / 3) {
              return element.dataset.value[index];
          }
          return letters[Math.floor(Math.random()*26)]
      })
      .join("");
  
    if(iterations >= (4 + element.dataset.value.length) * 3) clearInterval(interval);
    iterations +=1
  }, 30);
}

// 页面加载完成后自动触发特效
window.onload = () => {
  const targetH1 = document.querySelector("h1");
  runHackerEffect(targetH1);
};
</script>

改动说明 #

• 把原有的悬停逻辑抽成独立函数runHackerEffect，不再依赖鼠标事件的event对象，直接用传入的DOM元素操作，逻辑更清晰。
• 用window.onload监听页面加载完成事件，这时候页面所有资源（包括DOM）都加载好了，能正确找到h1元素并触发特效。
• 如果想更早触发（比如DOM结构加载完就执行，不用等图片、样式表），可以把window.onload换成DOMContentLoaded事件：

  document.addEventListener('DOMContentLoaded', () => {
    const targetH1 = document.querySelector("h1");
    runHackerEffect(targetH1);
  });
  

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