如何实现时、分、秒连续计时功能？附问题代码求助

我来帮你梳理代码里的问题，然后给出能正常工作的完整实现：

你的代码里存在的核心问题： #

• 赋值错误：你用了seconds == 0（比较运算符）而不是seconds = 0（赋值），导致秒数无法正确重置为0
• 重复累加逻辑：第一个版本里有多余的minutes++，会让分钟被错误地重复增加
• 计时间隔错误：setInterval(startTimer, 10)会让计时器每10毫秒触发一次，这会导致计时速度比实际快100倍，应该用1000毫秒（1秒）
• 时间格式问题：没有处理补零逻辑，比如秒数小于10时应该显示05而不是5
• 不完整的进位逻辑：第二个版本的startTimer只处理了秒数，完全没实现分和时的进位逻辑

修正后的完整代码： #

window.onload = function () {
  let hours = 0;
  let minutes = 0;
  let seconds = 0;
  const myHour = document.getElementById("hours");
  const myMinute = document.getElementById('minutes');
  const mySecond = document.getElementById('seconds');
  const cButton = document.getElementById('count');
  const rButton = document.getElementById('reset');
  let Interval;

  // 补零函数：确保单个数字显示为两位，比如5 → "05"
  function padZero(num) {
    return num < 10 ? `0${num}` : `${num}`;
  }

  // 更新DOM显示时间
  function updateDisplay() {
    myHour.innerHTML = padZero(hours);
    myMinute.innerHTML = padZero(minutes);
    mySecond.innerHTML = padZero(seconds);
  }

  function startTimer() {
    // 先累加秒数
    seconds++;
    // 处理秒数进位
    if (seconds >= 60) {
      seconds = 0;
      minutes++;
      // 处理分钟进位
      if (minutes >= 60) {
        minutes = 0;
        hours++;
        // 小时不限制上限，满足你到06:56:34后继续计时的需求
      }
    }
    // 更新显示
    updateDisplay();
  }

  cButton.onclick = function () {
    // 先清除之前的定时器，防止多次点击创建多个定时器
    clearInterval(Interval);
    // 每秒触发一次计时
    Interval = setInterval(startTimer, 1000);
  }

  rButton.onclick = function () {
    clearInterval(Interval);
    // 重置时间为0
    hours = 0;
    minutes = 0;
    seconds = 0;
    // 更新显示
    updateDisplay();
  }

  // 页面加载时初始化显示00:00:00
  updateDisplay();
}

关键修正说明： #

1. 添加补零函数：padZero确保所有时间单位都显示为两位数字，符合标准的时:分:秒格式
2. 修正计时间隔：把setInterval的间隔改为1000毫秒，保证每秒只走1秒
3. 正确的进位逻辑：先累加秒数，满60重置为0并累加分钟；分钟满60重置为0并累加小时，小时不设上限，支持连续计时
4. 分离更新显示逻辑：用updateDisplay统一处理DOM更新，避免重复代码
5. 修复变量赋值错误：确保所有重置操作使用赋值运算符=而不是比较运算符==
6. 初始化显示：页面加载时就调用updateDisplay，确保初始显示为00:00:00

这样修改后，你的计时器就能从00:00:00开始连续计时，到06:56:34后会继续往06:56:35、06:56:36……甚至24:00:00之后继续累加，完全满足你的需求。

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