JavaScript计数到100后页面无法跳转问题排查求助

核心问题分析 #

• 跳转判断的if(nnumber == 100)写在myLoop()调用之前，此时nnumber初始值为0，只会执行一次且永远不满足条件，自然不会触发跳转。
• 循环内部nnumber被重复累加：先是nnumber += 1，紧接着又nnumber++，导致每次计数跳2，不仅显示数值和实际变量值不一致，还可能跳过100的判断逻辑。

修复后的JavaScript代码 #

var number = document.getElementById("mainText").textContent;
var nnumber = parseInt(number)

function myLoop() {         
  setTimeout(function() {   
    // 只累加一次，保证数值和显示一致
    nnumber += 1;
    document.getElementById("mainText").innerHTML = nnumber;  
    
    // 在每次累加后判断是否达到100
    if (nnumber < 101) {           
      myLoop();              
    } else {
      // 达到100时执行跳转
      console.log(typeof(nnumber));
      window.location.replace("mainverification.html");
    }                       
  }, 200);
}

myLoop();

// 元素切换逻辑保持不变
const element1 = document.getElementById("element1");
const element2 = document.getElementById("element2");
const element3 = document.getElementById("element3");
const element4 = document.getElementById("element4");
const element5 = document.getElementById("element5");

setTimeout(function(){
    element2.style.display = "block";
    element1.style.display = "none"; 
    setTimeout(function(){ 
        element2.style.display="none";
        element3.style.display="block";
        setTimeout(function(){ 
            element3.style.display="none";
            element4.style.display="block";
            setTimeout(function(){ 
                element4.style.display="none";
                element5.style.display="block";
            },2500);
        },2500);
    },2500);
},1000);

额外优化说明 #

• 给元素变量加上const声明，避免全局污染。
• 把跳转逻辑移到循环内部的判断分支里，每次累加后检查数值，确保达到100时立即触发跳转。
• 移除了重复的nnumber++，让计数从0到100逐个递增，显示和变量值一致。

原HTML代码（无需修改） #

<!DOCTYPE html>
<html>
<head>
<title>Loading....</title>
<link rel="stylesheet" href="./starting.css">
</head>
<script src="https://kit.fontawesome.com/1f2023aaf1.js" crossorigin="anonymous"></script>
<body>
<i id="fa" class="fa fa-spinner fa-10x"></i>"><br>
<p id="mainText">0</p>
<p class="idk">%</p>
<p id="element1">Getting Data</p><br>
<p id="element2">Encrypting Data (Your Data is Private!)</p><br>
<p id="element3">Storing Data</p><br>
<p id="element4">Grabbing a Cofee</p><br>
<p id="element5">Playing Fortnite</p><br>
<script src="loading.js"></script>          
</body>
</html>

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