如何让 JavaScript 计数器到达 100 后自动跳转页面

本文详解为何 `if (nnumber == 100)` 重定向逻辑失效，并提供正确实现：将跳转判断移入递归 `settimeout` 循环中，确保每次更新后实时检查阈值，同时修复计数逻辑错误与代码可维护性问题。

你的代码核心问题在于跳转逻辑的执行时机错误：if(nnumber == 100) { ... } 这段判断只在脚本加载时执行一次（此时 nnumber 初始值为 0），而真正的计数和更新发生在 myLoop() 的异步循环中。因此，即使 nnumber 后续达到 100，该条件也永远不会被再次检查。

此外，当前计数逻辑存在明显 Bug：

nnumber += 1;
document.getElementById("mainText").innerHTML = nnumber;  
nnumber++; // ❌ 错误：这里又额外加了 1！导致每轮 +2

这会导致数字跳跃（如 0→2→4…），永远无法精准停在 100。

✅ 正确做法是：将重定向判断统一放入 myLoop 的每次迭代中，并在达到目标值时执行跳转，同时停止后续循环。

以下是优化后的完整 JavaScript 代码（已整合元素显隐逻辑，提升可读性与健壮性）：

// 初始化计数器
let nnumber = parseInt(document.getElementById("mainText").textContent) || 0;

// 页面元素引用（提前获取，避免重复查询）
const mainText = document.getElementById("mainText");
const elements = [
  document.getElementById("element1"),
  document.getElementById("element2"),
  document.getElementById("element3"),
  document.getElementById("element4"),
  document.getElementById("element5")
];

// 阶段式提示切换（每 2.5 秒切换一个）
elements.forEach((el, i) => {
  el.style.display = i === 0 ? "block" : "none";
});
setTimeout(() => {
  elements.forEach((el, i) => {
    if (i > 0) {
      setTimeout(() => {
        elements[i-1].style.display = "none";
        elements[i].style.display = "block";
      }, i * 2500);
    }
  });
}, 1000);

// 计数与跳转主逻辑
function myLoop() {
  setTimeout(() => {
    nnumber++;
    mainText.textContent = nnumber;

    if (nnumber >= 100) {
      // ✅ 达到目标，立即跳转
      console.log("Redirecting to mainverification.html...");
      window.location.replace("mainverification.html");
      return; // 终止递归，避免多余执行
    }

    // ✅ 继续循环（仅当未达标时）
    myLoop();
  }, 200);
}

// 启动计数
myLoop();

? 关键改进说明：

• 逻辑集中化：跳转判断与计数更新同处 myLoop 内，确保每次更新后即时响应；
• 修复双增 Bug：删除冗余 nnumber++，改为单次 nnumber++；
• 语义清晰：使用 textContent 替代 innerHTML（纯文本更安全）；用 const/let 明确作用域；
• 防重复跳转：return 确保跳转后不触发下一轮 setTimeout；
• 元素管理优化：预存 DOM 引用 + 数组遍历，替代嵌套 setTimeout，大幅提升可维护性。

⚠️ 注意事项：

• 确保 mainverification.html 文件路径正确且与当前 HTML 同目录；
• 若需兼容旧浏览器，window.location.replace() 可替换为 window.location.href = "..."（但前者更符合“替换历史记录”的语义）；
• 开发阶段建议在跳转前添加 alert("Redirecting...") 或 console.log(nnumber) 便于调试。

通过以上重构，计数器将稳定、精准地从 0 递增至 100，并在最后一刻无缝跳转至目标页面。