如何用JavaScript实现数字递增动画？现有代码无法运行求帮助

原代码的问题点 #

• setTimeout(goUpThing(i), 10) 是错误写法：这里直接执行了goUpThing(i)，而非把函数引用传给setTimeout，导致所有数字瞬间输出，没有延迟效果
• 循环会瞬间跑完，所有定时器的延迟都是10ms，几乎同时触发，看不到逐次递增的动画
• 函数最后直接把显示设为目标随机数，直接覆盖了动画过程
• numbervalue未声明，会变成全局变量，容易引发冲突

修复后的代码 #

HTML（无需改动，保持原样即可）

<html>
  <body>
    <h1>
      <em>random stuff</em>
    </h1>
    <hr>
    <h2 id="numberdisplay">
      there is no number yet
    </h2>
    <div>
    <button id="numbergenerator" type="button">
      generate a random number
    </button>
    </div>
  </body>
</html>

JavaScript

document.getElementById("numbergenerator").onclick = generateNumber;
let currentTimer; // 存储定时器ID，防止多次点击冲突

function generateNumber() {
    const targetNumber = Math.floor(Math.random() * 1001);
    let current = 0;
    
    // 清除之前的定时器，避免多次点击叠加动画
    if (currentTimer) clearTimeout(currentTimer);
    
    // 递归实现逐次递增动画
    function countUp() {
        document.getElementById("numberdisplay").textContent = current;
        if (current < targetNumber) {
            current++;
            currentTimer = setTimeout(countUp, 10);
        }
    }
    
    countUp();
}

修复说明 #

1. 用const声明目标随机数、let声明当前计数，避免全局变量污染
2. 新增currentTimer变量存储定时器ID，点击按钮时先清除之前的定时器，防止多次点击导致动画混乱
3. 用递归函数countUp替代循环，每次递增后设置下一个10ms的定时器，确保数字逐次显示
4. 用textContent替代innerHTML（更安全，这里不需要解析HTML内容）
5. 移除原代码中直接赋值目标数字的语句，让动画完整执行到目标值

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