JavaScript秒表Reset按钮修复：重置后无法从零开始计时问题

问题：当前实现的秒表中，Reset按钮仅将页面显示的分钟、秒、毫秒值重置为0，但内部计时计数器未被重置，再次点击Play按钮时，计时会从之前暂停的数值继续，而非从零开始。

解决方法：修改reset函数，在更新页面显示的同时，重置所有计时计数器变量（minCounter、secCounter、centiCounter）为0，确保下次启动计时从0开始。

修改后的完整JavaScript代码：

const playButton = document.getElementsByClassName("play")[0];
const lapButton = document.getElementsByClassName("lap")[0];
const resetButton = document.getElementsByClassName("reset")[0];
const clearButton = document.getElementsByClassName("lap-clear-button")[0];
const minute = document.getElementsByClassName("minute")[0];
const second = document.getElementsByClassName("sec")[0];
const centisecond = document.getElementsByClassName("msec")[0];
const laps = document.getElementsByClassName("laps")[0];
const bg = document.getElementsByClassName("outer-circle")[0];

let isPlay = false
let secCounter = 0;
let min;
let sec;
let centiSec;
let centiCounter = 0;
let minCounter = 0;
let lapItem = 0;
let isReset = false;


const toggleButton = () => {
  lapButton.classList.remove("hidden");
  resetButton.classList.remove("hidden");
}

const play = () => {
  if (!isPlay && !isReset) {
    playButton.innerHTML = 'Pause';
    bg.classList.add("animation-bg");
    min = setInterval(() => {
      minute.innerHTML = `${++minCounter} :`;
    }, 60 * 1000);
    sec = setInterval(() => {
      if (secCounter === 60) {
        secCounter = 0;
      }
      second.innerHTML = ` ${++secCounter} : `;
    }, 1000);
    centiSec = setInterval(() => {
      if (centiCounter === 100) {
        centiCounter = 0;
      }
      centisecond.innerHTML = ` ${++centiCounter} `;
    }, 10);
    isPlay = true;
    isReset = true;
  } else {
    playButton.innerHTML = 'Play';
    clearInterval(min);
    clearInterval(sec);
    clearInterval(centiSec);
    isPlay = false;
    isReset = false;
    bg.classList.remove("animation-bg");
  }
  toggleButton();
}

const reset = () => {
  isReset = true;
  play();
  lapButton.classList.add("hidden");
  resetButton.classList.add("hidden");
  // 重置页面显示
  second.innerHTML = ' 0 :';
  centisecond.innerHTML = ' 0';
  minute.innerHTML = '0 :';
  // 重置内部计时计数器
  minCounter = 0;
  secCounter = 0;
  centiCounter = 0;
}

const lap = () => {
  const li = document.createElement("li");
  const number = document.createElement("span");
  const timeStamp = document.createElement("span");

  li.setAttribute("class", "lap-item ");
  number.setAttribute("class", "number");
  timeStamp.setAttribute("class", "time-stamp");

  number.innerText = `#${++lapItem}`;
  timeStamp.innerHTML = `${minCounter} : ${secCounter} : ${centiCounter}`;

  li.append(number, timeStamp);
  laps.append(li);

  clearButton.classList.remove("hidden");
}

const clearAll = () => {
  laps.innerHTML = ' ';
  laps.append(clearButton);
  clearButton.classList.add("hidden");
  lapItem = 0;
}
playButton.addEventListener("click", play);
resetButton.addEventListener("click", reset);
lapButton.addEventListener("click", lap);
clearButton.addEventListener("click", clearAll);

关键修改点 #

• 在reset函数中新增了对minCounter、secCounter、centiCounter的重置操作，让内部计时状态与页面显示完全同步，确保再次启动计时从0开始。

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