网页文本先随机切换密文再逐字符解密的JavaScript功能异常问题

嘿，我仔细看了你的代码，发现密文循环结束后解密没触发的问题出在几个关键的小细节上，咱们来一步步修复：

问题分析 #

1. 函数名不匹配：你定义的解密函数是decryptHeader，但在密文循环结束后调用的是不存在的decryptText，这直接导致解密逻辑根本没执行。
2. 缺少必要参数：updateCipherText函数没有接收元素对应的原始文本参数，解密时拿不到要还原的目标内容。
3. 调用时未传递原始文本：启动updateCipherText时，没有把每个元素的原始文本传进去，就算解密函数能执行，也不知道要还原成什么。

修复后的完整代码 #

// Function to generate random foreign symbols
function generateRandomSymbols(length) {
  const symbols = "!@#$%^&*()_+-=[]{}|;':\",.<>/?abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
  let result = '';
  for (let i = 0; i < length; i++) {
    const randomIndex = Math.floor(Math.random() * symbols.length);
    result += symbols.charAt(randomIndex);
  }
  return result;
}

// 把函数名改成更通用的decryptText，适配所有元素（也可以保留decryptHeader，但调用时要对应）
function decryptText(textElement, originalText, decryptionSpeed) {
  let currentIndex = 0;

  function updateText() {
    if (currentIndex < originalText.length) {
      const charIndex = currentIndex;
      const char = originalText.charAt(charIndex);
      const newText = textElement.textContent.substring(0, charIndex) + char + textElement.textContent.substring(charIndex + 1);
      textElement.textContent = newText;
      currentIndex++;
      setTimeout(updateText, decryptionSpeed);
    }
  }

  updateText();
}

document.addEventListener('DOMContentLoaded', function () {
  // 找到页面元素
  const headerElement = document.querySelector('.header-text');
  const homeElement = document.querySelector('.nav-home');
  const aboutElement = document.querySelector('.nav-about');
  const portfolioElement = document.querySelector('.nav-portfolio');
  const contactElement = document.querySelector('.nav-contact');

  // 存储原始文本
  const originalHeaderText = headerElement.textContent;
  const originalHomeText = homeElement.textContent;
  const originalAboutText = aboutElement.textContent;
  const originalPortfolioText = portfolioElement.textContent;
  const originalContactText = contactElement.textContent;

  const decryptionSpeed = 100; // 解密速度（毫秒）

  // 生成35组随机密文
  const cipherHeaderTexts = Array.from({ length: 35 }, () => generateRandomSymbols(originalHeaderText.length));
  const cipherHomeTexts = Array.from({ length: 35 }, () => generateRandomSymbols(originalHomeText.length));
  const cipherAboutTexts = Array.from({ length: 35 }, () => generateRandomSymbols(originalAboutText.length));
  const cipherPortfolioTexts = Array.from({ length: 35 }, () => generateRandomSymbols(originalPortfolioText.length));
  const cipherContactTexts = Array.from({ length: 35 }, () => generateRandomSymbols(originalContactText.length));

  // 修复：新增originalText参数，用于传递目标原始文本
  function updateCipherText(element, cipherTexts, originalText) {
    let currentIndex = 0;

    function updateCipher(index) {
      if (index < cipherTexts.length) {
        element.textContent = cipherTexts[index];
        setTimeout(() => {
          updateCipher(index + 1);
        }, 50); // 密文切换速度
      } else {
        // 修复：调用正确的解密函数，并传入原始文本
        decryptText(element, originalText, decryptionSpeed);
      }
    }

    updateCipher(currentIndex);
  }

  // 修复：调用时传入对应的原始文本
  updateCipherText(headerElement, cipherHeaderTexts, originalHeaderText);
  updateCipherText(homeElement, cipherHomeTexts, originalHomeText);
  updateCipherText(aboutElement, cipherAboutTexts, originalAboutText);
  updateCipherText(portfolioElement, cipherPortfolioTexts, originalPortfolioText);
  updateCipherText(contactElement, cipherContactTexts, originalContactText);
});

关键修复点说明 #

• 把解密函数名从decryptHeader改为decryptText，让它更通用，适合所有导航元素和标题；
• 给updateCipherText函数新增originalText参数，确保解密时能拿到正确的目标文本；
• 调用updateCipherText时，额外传递每个元素对应的原始文本；
• 密文循环结束后，调用正确的decryptText函数并传入所需参数。

这样修改后，页面加载时会先循环显示35次随机密文，然后自动逐字符解密回原始文本啦。

备注：内容来源于stack exchange，提问作者tekkyprograms