实现鼠标悬停文本的黑客式乱码/解码特效（HTML+JavaScript）

问题修复与功能补充 #

你的现有代码已实现鼠标悬停时的文本过渡效果，但存在两处需要调整的细节：

• 元素存在性检测逻辑错误：getElementsByClassName 返回HTMLCollection对象，永远不会为null，需通过length判断是否存在目标元素
• 缺少鼠标移出时的反向动画效果

完整代码实现 #

let pxScreen1 = document.getElementsByClassName("screen1");

if (pxScreen1.length > 0) {
  const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
  let interval = null;

  const screen = document.querySelector(".screen1"),
        name = document.querySelector(".name1");

  // 鼠标悬停：过渡到指定单词
  screen.onmouseenter = event => {  
    let iteration = 0;
    clearInterval(interval);
    
    interval = setInterval(() => {
      name.innerText = name.innerText
        .split("")
        .map((letter, index) => {
          if(index < iteration) {
            return name.dataset.value[index];
          }
          return letters[Math.floor(Math.random() * 26)];
        })
        .join("");
      
      if(iteration >= name.dataset.value.length){ 
        clearInterval(interval);
      }
      iteration += 1 / 3;
    }, 40);
  };

  // 鼠标移出：过渡到随机字母（两种可选方案）
  screen.onmouseleave = event => {
    let iteration = 0;
    clearInterval(interval);

    // 方案1：实时生成与目标单词长度相同的随机字母串
    const randomTarget = Array.from({length: name.dataset.value.length}, () => 
      letters[Math.floor(Math.random() * letters.length)]
    ).join('');

    // 方案2：使用预设的随机字符串（需给元素添加data-random属性，如<span class="name1" data-value="HACKER" data-random="XYZABC"></span>）
    // const randomTarget = name.dataset.random || Array.from({length: name.dataset.value.length}, () => letters[Math.floor(Math.random() * letters.length)]).join('');
    
    interval = setInterval(() => {
      name.innerText = name.innerText
        .split("")
        .map((letter, index) => {
          if(index < iteration) {
            return randomTarget[index];
          }
          return letters[Math.floor(Math.random() * 26)];
        })
        .join("");
      
      if(iteration >= randomTarget.length){ 
        clearInterval(interval);
      }
      iteration += 1 / 3;
    }, 40);
  };
}

代码说明 #

1. 元素检测修正：通过pxScreen1.length > 0准确判断页面中是否存在目标元素，避免无效代码执行
2. 鼠标悬停效果：保留原有逻辑，按字符逐个过渡到data-value属性指定的目标单词
3. 鼠标移出效果：
   • 方案1：实时生成与目标单词长度一致的随机字母串，逐个字符过渡
   • 方案2：可通过元素的data-random属性预设固定的随机字符串，优先使用预设值，无预设则自动生成
4. 动画控制：每次触发动画前先清除之前的定时器，避免多个动画同时运行导致的混乱

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