JavaScript倒计时计时器问题：2小时测验倒计时小时未递减排查

核心问题点 #

• 小时被硬编码为固定值：代码里hours = 2是写死的，不管时间流逝多久，小时始终显示2，完全不会随剩余时间变化。
• 时间拆分逻辑错误：没有从剩余总秒数diff中正确计算剩余小时数，而是直接使用固定值跳过了动态计算步骤。
• 初始调用参数未定义：startTimer(seconds, display)里的seconds变量没有定义，应该传入2小时对应的总秒数（2×60×60=7200）。
• 倒计时结束逻辑异常：当diff <=0时重置start的逻辑会导致计时器无限循环，不符合测验结束后停止计时的需求。

修复后的完整代码 #

JavaScript 部分

function startTimer(duration, display) {
  var start = Date.now(),
    diff,
    hours,
    minutes,
    seconds;

  function timer() {
    // 计算剩余秒数
    diff = duration - (((Date.now() - start) / 1000) | 0);

    // 从剩余秒数中拆分小时、分钟、秒
    hours = (diff / 3600) | 0;
    diff = diff % 3600; // 扣除小时对应的秒数，剩余部分用于计算分钟和秒
    minutes = (diff / 60) | 0;
    seconds = (diff % 60) | 0;

    // 补零处理，保证格式统一
    hours = hours < 10 ? "0" + hours : hours;
    minutes = minutes < 10 ? "0" + minutes : minutes;
    seconds = seconds < 10 ? "0" + seconds : seconds;

    display.textContent = hours + ":" + minutes + ":" + seconds;

    // 倒计时结束后停止计时器，避免循环
    if (diff <= 0) {
      clearInterval(timerInterval);
      display.textContent = "00:00:00";
      // 此处可添加测验结束的逻辑，比如自动提交试卷
    }
  };
  timer();
  // 保存计时器ID，方便结束时清除
  var timerInterval = setInterval(timer, 1000);
}

window.onload = function() {
  var display = document.querySelector('#time');
  // 传入2小时对应的总秒数：7200
  startTimer(7200, display);
};

HTML 部分

<div>Time remaining: <span id="time">02:00:00</span></div>

修复说明 #

• 移除硬编码的hours = 2，改为从剩余总秒数diff中动态计算小时数，再扣除小时对应的秒数后计算分钟和秒，保证时间显示随剩余时长动态变化。
• 修正初始调用参数，传入7200秒（2小时）替代未定义的seconds变量。
• 修复倒计时结束逻辑，用clearInterval停止计时器，避免无限循环，并显示最终的00:00:00，同时预留测验结束的逻辑入口。

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