如何实现JS点击事件触发的起止计时 满1小时自动切换时间格式

实现规则对齐 #

• 初始显示值固定为00.00，点击按钮触发计时启动/停止
• 累计计时不足1小时时，按分.秒的00.00格式渲染
• 累计计时满1小时后，自动切换为时.分.秒的00.00.00格式渲染

完整可运行代码 #

<div id="timer">00.00</div>
<button id="timerBtn">开始计时</button>

<script>
let intervalInstance = null;
let startTimestamp = 0;
const timerDom = document.getElementById('timer');
const btnDom = document.getElementById('timerBtn');

// 个位数补前导零
const fillZero = (n) => String(n).padStart(2, '0');

// 时间格式化
const getFormatTime = (totalSec) => {
  const hour = Math.floor(totalSec / 3600);
  const min = Math.floor((totalSec % 3600) / 60);
  const sec = Math.floor(totalSec % 60);
  return hour > 0 ? `${fillZero(hour)}.${fillZero(min)}.${fillZero(sec)}` : `${fillZero(min)}.${fillZero(sec)}`;
};

// 绑定点击启停事件
btnDom.addEventListener('click', () => {
  if (!intervalInstance) {
    // 启动计时：记录起始时间戳，开启定时器
    startTimestamp = Date.now();
    btnDom.innerText = '停止计时';
    intervalInstance = setInterval(() => {
      const passedSec = (Date.now() - startTimestamp) / 1000;
      timerDom.innerText = getFormatTime(passedSec);
    }, 1000);
  } else {
    // 停止计时：清除定时器，重置实例标记
    clearInterval(intervalInstance);
    intervalInstance = null;
    btnDom.innerText = '开始计时';
  }
})
</script>

原有代码问题说明 #

1. 语法错误：JS内置方法和关键字区分大小写，SetInterval正确写法为setInterval，变量声明关键字Let正确写法为小写let
2. 逻辑错误：不能在定时器回调内每次直接取当前时间戳作为计时值，必须在点击启动的瞬间记录基准时间戳，每秒计算当前时间和基准时间的差值，才能得到从0开始累加的正确时长
3. 缺失终止逻辑：setInterval执行后会返回定时器唯一标识，必须把这个标识存到变量里，点击停止时调用clearInterval(标识)才能终止计时，否则定时器会一直运行

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