当前位置：首页 > 文章列表 > 文章 > 前端 > JS计数到100自动跳转页面教程

JS计数到100自动跳转页面教程

2026-01-14 10:45:46 0浏览收藏

热门推荐

漫画APP

动画内容聚合，热门资源快捷查看

在文章实战开发的过程中，我们经常会遇到一些这样那样的问题，然后要卡好半天，等问题解决了才发现原来一些细节知识点还是没有掌握好。今天golang学习网就整理分享《JavaScript 计数到100自动跳转页面》，聊聊，希望可以帮助到正在努力赚钱的你。

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

本文详解为何 `if(nnumber === 100)` 重定向逻辑失效，并提供正确实现：将跳转判断嵌入递归定时循环中，确保在每次计数更新后实时检查，同时修复双重自增、类型安全与 DOM 同步等关键问题。

你的代码本意是让页面显示一个从 0 开始、每 200ms 增加一次的计数器，当数值达到 100 时跳转至 mainverification.html。但当前重定向未触发，根本原因在于：跳转判断 if(nnumber == 100) 仅在脚本加载时执行一次，而此时 nnumber 初始值为 0（来自

），条件恒为 false，后续计数变化完全不会触发该判断。

此外，代码中还存在几个关键缺陷：

❌ 重复自增：nnumber += 1; 后又执行 nnumber++; → 每次实际 +2，导致跳变（如 0→2→4…），永远无法精确命中 100；
❌ 类型隐患：parseInt() 未指定进制，且未校验解析结果（若文本为空或非数字，会得 NaN）；
❌ 逻辑错位：状态切换（element1~element5）与计数循环混写，缺乏封装，易受执行时机干扰。

✅ 正确做法是：将重定向逻辑放入 myLoop 的递归分支中，与计数更新同步判断。以下是优化后的完整解决方案：

// 安全获取初始值（带默认值和类型保护）
const mainTextEl = document.getElementById("mainText");
let nnumber = parseInt(mainTextEl.textContent, 10) || 0;

function myLoop() {
  setTimeout(() => {
    nnumber += 1; // ✅ 仅自增一次
    mainTextEl.textContent = nnumber; // ✅ 使用 textContent 更安全

    if (nnumber < 100) {
      myLoop(); // 继续计数
    } else if (nnumber === 100) {
      console.log("✅ 已到达100，即将跳转...");
      window.location.replace("mainverification.html");
    }
    // 若需支持 >100 的兜底（如防止意外超限），可加 else 分支
  }, 200);
}

// ✅ 立即启动计数（移除外部无效的 if(nnumber==100)）
myLoop();

// ✅ 封装状态切换逻辑，避免嵌套地狱（推荐使用 Promise 或 async/await，此处用链式 setTimeout）
function showNextElement(currentId, nextId, delay = 2500) {
  const current = document.getElementById(currentId);
  const next = document.getElementById(nextId);
  if (current) current.style.display = "none";
  if (next) {
    setTimeout(() => { next.style.display = "block"; }, delay);
  }
}

// 启动状态动画序列（1000ms 后开始，每步间隔 2500ms）
setTimeout(() => {
  showNextElement("element1", "element2", 0);
  setTimeout(() => showNextElement("element2", "element3"), 2500);
  setTimeout(() => showNextElement("element3", "element4"), 5000);
  setTimeout(() => showNextElement("element4", "element5"), 7500);
}, 1000);

? 关键改进说明：