如何通过For循环实现HTML标签的计时器效果？代码问题求助

数据老陈

2026-5-21

解决从0到350逐步变化的计时器问题

我明白你想要的是一个从0慢慢跳到350的计时器效果，你的原代码之所以直接显示最终结果，主要有两个关键问题：

你在setInterval里直接调用了change(i)，这会让函数立刻执行，而不是每隔一段时间触发。setInterval的第一个参数应该是函数引用，不是函数调用结果。
就算修正了函数传递的问题，for循环会瞬间创建350个定时器，它们会几乎同时开始工作，最后数值会直接跳到350，完全没了逐步变化的感觉。

下面给你两种靠谱的实现方式：

方式一：使用`setInterval`递增数值

这种方式最直观，用一个定时器每隔一段时间把数值加1，直到达到目标值就清除定时器：

<span id="timer"></span>
<script>
  const target = 350;
  let current = 0;
  const timerElement = document.getElementById("timer");
  
  // 设置定时器，每10毫秒更新一次（可以根据需要调整速度）
  const intervalId = setInterval(() => {
    timerElement.textContent = current;
    current++;
    // 达到目标值就停止定时器
    if (current > target) {
      clearInterval(intervalId);
    }
  }, 10);
</script>

方式二：使用递归`setTimeout`

这种方式更灵活，适合需要控制每一步间隔的场景：

<span id="timer"></span>
<script>
  const target = 350;
  let current = 0;
  const timerElement = document.getElementById("timer");
  
  function updateTimer() {
    timerElement.textContent = current;
    current++;
    // 还没到目标值就继续调用自己
    if (current <= target) {
      setTimeout(updateTimer, 10); // 间隔10毫秒，可调整
    }
  }
  
  // 启动计时器
  updateTimer();
</script>