请求为在线公共计时器添加小时显示与点击启动功能

修改后的完整代码 #

CSS #

#hours, #minutes, #seconds {
  font-size: 5em;
}
#colon {
  font-size: 5em;
}
button {
  font-size: 1.5em;
  margin: 10px 5px;
  padding: 8px 16px;
  cursor: pointer;
}

HTML & JavaScript #

<div class="timer-display">
  <label id="hours">00</label>
  <label id="colon">:</label>
  <label id="minutes">00</label>
  <label id="colon">:</label>
  <label id="seconds">00</label>
</div>
<div class="controls">
  <button id="startBtn">启动计时器</button>
  <button id="pauseBtn">暂停</button>
  <button id="resetBtn">重置</button>
</div>

<script type="text/javascript">
  // 获取DOM元素
  const hoursLabel = document.getElementById("hours");
  const minutesLabel = document.getElementById("minutes");
  const secondsLabel = document.getElementById("seconds");
  const startBtn = document.getElementById("startBtn");
  const pauseBtn = document.getElementById("pauseBtn");
  const resetBtn = document.getElementById("resetBtn");

  let totalSeconds = 0;
  let timerInterval = null; // 存储计时器ID，用于控制启停

  // 格式化数字为两位，不足补0
  function pad(val) {
    return val.toString().padStart(2, "0");
  }

  // 更新时间显示
  function updateTime() {
    totalSeconds++;
    const seconds = totalSeconds % 60;
    const minutes = Math.floor(totalSeconds / 60) % 60;
    const hours = Math.floor(totalSeconds / 3600);

    secondsLabel.textContent = pad(seconds);
    minutesLabel.textContent = pad(minutes);
    hoursLabel.textContent = pad(hours);
  }

  // 启动计时器
  startBtn.addEventListener("click", () => {
    if (!timerInterval) { // 避免重复启动计时器
      timerInterval = setInterval(updateTime, 1000);
    }
  });

  // 暂停计时器
  pauseBtn.addEventListener("click", () => {
    clearInterval(timerInterval);
    timerInterval = null;
  });

  // 重置计时器
  resetBtn.addEventListener("click", () => {
    clearInterval(timerInterval);
    timerInterval = null;
    totalSeconds = 0;
    hoursLabel.textContent = "00";
    minutesLabel.textContent = "00";
    secondsLabel.textContent = "00";
  });
</script>

关键修改说明 #

• 新增小时显示：添加hours标签，通过totalSeconds / 3600计算小时数，用取余操作保证分钟、秒始终在0-59范围内
• 实现点击启动逻辑：
  用timerInterval存储计时器ID，避免重复触发启动事件；仅在计时器未运行时执行启动操作
• 补充实用控制功能：增加暂停、重置按钮，让计时器操作更灵活
• 代码优化：
  用const/let替代旧版var，符合现代JavaScript规范；用textContent替代innerHTML提升安全性；用padStart简化补0逻辑，替代原有的冗余函数写法

内容的提问来源于stack exchange，提问作者Giuseppe Carmine Russo