JavaScript倒计时器进入负数问题求助：如何实现循环重启？

核心问题 #

1. 倒计时时长错误：你把15分钟对应的毫秒数写成了9000（实际仅为9秒），正确的15分钟换算为毫秒是15 * 60 * 1000 = 900000。
2. 负数显示问题：倒计时结束（distance < 0）时，代码先把负数的分钟/秒更新到DOM，再执行清除定时器和重置操作，导致页面出现负数。
3. 无效DOM元素报错：调用startCountdown时传入的timerId（比如countdown-timer1、labels）在HTML中不存在，执行document.getElementById(timerId).innerHTML = "EXPIRED"会抛出错误，中断后续的重启逻辑。

修复后的完整代码 #

<div class="containers-1">
  <div class="boxes-1">
    <span class="values-1" id="minutes-1">15</span>
    <div class="labeles-1">Minutes</div>
  </div>
  <div class="boxes-1">
    <span class="values-1" id="seconds-1">00</span>
    <div class="labeles-1">Seconds</div>
  </div>
</div>
<div class="containers-1">
  <div class="boxes-1">
    <span class="values-1" id="minutes-2">15</span>
    <div class="labeles-1">Minutes</div>
  </div>
  <div class="boxes-1">
    <span class="values-1" id="seconds-2">00</span>
    <div class="labeles-1">Seconds</div>
  </div>
</div>
<script>
function startCountdown(minutesId, secondsId) {
  // 正确设置15分钟的倒计时目标时间
  const countdownDuration = 15 * 60 * 1000;
  let countDownDate = new Date().getTime() + countdownDuration;
  
  const x = setInterval(function() {
    const now = new Date().getTime();
    let distance = countDownDate - now;
    
    // 提前处理倒计时结束逻辑，避免显示负数
    if (distance < 0) {
      clearInterval(x);
      // 重置显示为两位00
      document.getElementById(minutesId).textContent = "00";
      document.getElementById(secondsId).textContent = "00";
      // 1秒后重启倒计时
      setTimeout(() => {
        startCountdown(minutesId, secondsId);
      }, 1000);
      return; // 退出当前循环，不执行后续负数计算
    }
    
    // 计算分钟和秒数，不足两位补0
    const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    const seconds = Math.floor((distance % (1000 * 60)) / 1000);
    
    // 格式化数字为两位字符串
    document.getElementById(minutesId).textContent = minutes.toString().padStart(2, '0');
    document.getElementById(secondsId).textContent = seconds.toString().padStart(2, '0');
  }, 1000);
}

// 启动两个倒计时，移除无效的timerId参数
startCountdown("minutes-1", "seconds-1");
startCountdown("minutes-2", "seconds-2");
</script>

关键修改点 #

• 修正了倒计时时长的毫秒数，确保是15分钟而非9秒。
• 将倒计时结束的判断逻辑移到计算分钟秒数之前，避免负数更新到DOM。
• 移除了无效的timerId参数和对应的报错操作，保证重启逻辑正常执行。
• 使用textContent替代innerHTML（更安全高效），并通过padStart(2, '0')让数字始终显示为两位格式（比如5秒显示为"05"）。

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