Chrome扩展计时器启动时无法显示00:00:00的问题求助

我正在开发一款作为简单秒表/计时器的Chrome扩展（个人爱好项目），希望计时器启动时默认显示00:00:00，且点击启动按钮时也从此时间开始计时（当前启动功能正常）。我是JavaScript新手，设置了let startTime = 0;，并在popup.html中配置了<div id="timer" class="timer">00:00:00</div>，但启动时计时器仍显示类似466052:05:02的异常时间，请求解决该问题。

原始代码 #

JavaScript代码

let timerIntervalId = null;
let startTime = 0;
let isTimerRunning = false;

function startTimer() {
  if (!isTimerRunning) {
    startTime = Date.now() - startTime;
    timerIntervalId = setInterval(updateTimer, 1000);
    isTimerRunning = true;
    document.getElementById('start-stop-button').classList.remove('start');
    document.getElementById('start-stop-button').classList.add('stop');
    document.getElementById('start-stop-button').textContent = 'Stop';
  } else {
    clearInterval(timerIntervalId);
    isTimerRunning = false;
    document.getElementById('start-stop-button').classList.remove('stop');
    document.getElementById('start-stop-button').classList.add('start');
    document.getElementById('start-stop-button').textContent = 'Start';
  }
}

function resetTimer() {
  clearInterval(timerIntervalId);
  startTime = 0;
  isTimerRunning = false;
  updateTimer();
  document.getElementById('start-stop-button').classList.remove('stop');
  document.getElementById('start-stop-button').classList.add('start');
  document.getElementById('start-stop-button').textContent = 'Start';
}

function updateTimer() {
  let currentTime = Date.now() - startTime;
  let hours = Math.floor(currentTime / (60 * 60 * 1000));
  let minutes = Math.floor((currentTime % (60 * 60 * 1000)) / (60 * 1000));
  let seconds = Math.floor((currentTime % (60 * 1000)) / 1000);
  let timerDisplay = `${padZero(hours)}:${padZero(minutes)}:${padZero(seconds)}`;
  document.getElementById('timer').textContent = timerDisplay;
}

function padZero(num) {
  if (num < 10) {
    return `0${num}`;
  } else {
    return num;
  }
}

document.addEventListener('DOMContentLoaded', () => {
  updateTimer();

  document.getElementById('start-stop-button').addEventListener('click', () => {
    startTimer();
  });

  document.getElementById('reset-button').addEventListener('click', () => {
    resetTimer();
  });
});

HTML代码

<button type="button" id="start-stop-button">Start</button>
<button type="button" id="reset-button">Reset</button>

<div id="timer"></div>

异常时间的根源在startTimer函数的这行代码：

startTime = Date.now() - startTime;

初始状态下startTime为0，第一次启动时会把它设为当前时间戳；但暂停后再次启动时，这行代码会用当前时间戳减去之前保存的时间戳，导致startTime变成一个巨大的负数。后续计算Date.now() - startTime时，结果会是当前时间加上之前流逝的时间，最终显示出异常的超大数值。

正确逻辑需要区分「首次启动/重置后启动」和「暂停后继续启动」两种场景：

• 首次启动：记录当前时间作为起始点
• 暂停后继续：基于已流逝的时间，重新计算起始点，保证计时连续
• 重置：清空所有计时状态，回到初始的00:00:00

JavaScript代码

let timerIntervalId = null;
let startTime = 0;
let elapsedTime = 0; // 新增：记录已流逝的总毫秒数
let isTimerRunning = false;

function startTimer() {
  const btn = document.getElementById('start-stop-button');
  if (!isTimerRunning) {
    // 启动时：用当前时间减去已流逝时间，得到正确的起始点
    startTime = Date.now() - elapsedTime;
    timerIntervalId = setInterval(updateTimer, 1000);
    isTimerRunning = true;
    btn.classList.remove('start');
    btn.classList.add('stop');
    btn.textContent = 'Stop';
  } else {
    // 暂停时：计算并保存已流逝的总时间
    elapsedTime = Date.now() - startTime;
    clearInterval(timerIntervalId);
    isTimerRunning = false;
    btn.classList.remove('stop');
    btn.classList.add('start');
    btn.textContent = 'Start';
  }
}

function resetTimer() {
  clearInterval(timerIntervalId);
  startTime = 0;
  elapsedTime = 0; // 重置已流逝时间
  isTimerRunning = false;
  updateTimer();
  const btn = document.getElementById('start-stop-button');
  btn.classList.remove('stop');
  btn.classList.add('start');
  btn.textContent = 'Start';
}

function updateTimer() {
  const currentTime = Date.now() - startTime;
  const hours = Math.floor(currentTime / (60 * 60 * 1000));
  const minutes = Math.floor((currentTime % (60 * 60 * 1000)) / (60 * 1000));
  const seconds = Math.floor((currentTime % (60 * 1000)) / 1000);
  document.getElementById('timer').textContent = `${padZero(hours)}:${padZero(minutes)}:${padZero(seconds)}`;
}

function padZero(num) {
  return num < 10 ? `0${num}` : num;
}

document.addEventListener('DOMContentLoaded', () => {
  updateTimer();
  document.getElementById('start-stop-button').addEventListener('click', startTimer);
  document.getElementById('reset-button').addEventListener('click', resetTimer);
});

HTML代码

<button type="button" id="start-stop-button" class="start">Start</button>
<button type="button" id="reset-button">Reset</button>

<div id="timer"></div>

• 新增elapsedTime变量，专门记录暂停时已流逝的总毫秒数，避免直接修改startTime导致的逻辑混乱
• 优化启动/暂停逻辑：启动时基于已流逝时间计算起始点，暂停时保存已流逝时间
• 简化DOM元素重复获取，提升代码整洁度
• 重置时同时清空elapsedTime，确保完全回到初始状态

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