小时制网页秒表JS功能不生效问题求解

修复后的完整JS代码 #

替换你原有JS逻辑即可，HTML和CSS无需修改：

let minutesEl = document.getElementById("minutes");
let secondsEl = document.getElementById("seconds");
let startBtnEl = document.getElementById("startBtn");
let stopBtnEl = document.getElementById("stopBtn");

// 全局存储计数器和定时器ID
let counter = 0;
let intervalId = null;

startBtnEl.onclick = function() {
    // 已经有运行中的定时器直接返回，避免重复创建
    if (intervalId) return;
    intervalId = setInterval(function(){
        counter++;
        // 满1小时自动重置
        if (counter >= 3600) {
            clearInterval(intervalId);
            intervalId = null;
            counter = 0;
            minutesEl.textContent = "00";
            secondsEl.textContent = "00";
            return;
        }
        // 计算分钟和秒，不足两位补0
        let minutes = Math.floor(counter / 60);
        let seconds = counter % 60;
        minutesEl.textContent = minutes.toString().padStart(2, '0');
        secondsEl.textContent = seconds.toString().padStart(2, '0');
    }, 1000);
};

stopBtnEl.onclick = function() {
    clearInterval(intervalId);
    // 清空定时器ID，方便下次启动
    intervalId = null;
};

主要改动说明 #

• 把计数器counter、定时器IDintervalId改为全局变量，解决停止按钮无法访问定时器、重启计时可以接着上次进度继续的问题
• 新增start按钮重复点击拦截，避免多次点击生成多个定时器导致计时速度异常
• 新增分钟、秒数的格式化逻辑，不足两位自动补0，符合常规计时器展示效果
• 新增1小时自动重置逻辑，累计秒数达到3600（即1小时）时自动停止计时并重置为00:00

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