JS秒表重置后无法再次启动问题求助

架构老林

2026-8-1

秒表Reset后无法再次启动的修复方案

问题根源

你在resetCron()函数中直接用document.getElementById('watch').innerText='00:00:00';覆盖了整个watch容器的内容，这会把原本用来显示时分秒的三个<span>元素（minutes、seconds、hundredths）完全删除。后续点击Start启动秒表时，watchTime()函数无法找到这些span元素，自然无法更新时间，导致秒表看似无法启动。

修复方案

修改resetCron()函数，不要替换整个容器内容，而是分别重置每个span元素的文本值，和watchTime()的更新逻辑保持一致：

var hund = 0;
var sec = 0;
var min = 0;
var interval

function clockDigits(digit) {
  if (digit < 10) {
    return ('0' + digit)
  } else {
    return digit
  }
}

function startCron() {
  // 防止重复点击Start创建多个定时器
  if (!interval) {
    interval = setInterval(watchTime, 10);
  }
}

function pauseCron() {
  clearInterval(interval)
  // 重置变量，允许再次启动
  interval = null;
}

function resetCron() {
  clearInterval(interval);
  interval = null;
  hund = 0;
  sec = 0;
  min = 0;
  // 分别重置每个span的文本，保留原有DOM结构
  document.getElementById('hundredths').innerText = clockDigits(hund);
  document.getElementById('seconds').innerText = clockDigits(sec);
  document.getElementById('minutes').innerText = clockDigits(min);
}

function watchTime() {
  hund++;
  document.getElementById('hundredths').innerText = clockDigits(hund);
  if (hund == 100) {
    sec++;
    hund = 0;
    document.getElementById('seconds').innerText = clockDigits(sec);
  }
  if (sec == 60) {
    min++;
    sec = 0;
    document.getElementById('minutes').innerText = clockDigits(min);
  }
}