倒计时计时器无法在HTML中正确显示时间，求解决方案

问题说明 #

我正在制作一个倒计时计时器，但时间无法正确显示到HTML页面中。已经尝试修改变量并打印日志，但定时器始终持续运行，页面仅显示‘00:00:00’，希望实现读取并处理JavaScript代码顶部定义的初始时间变量。

原代码中的错误点 #

• 局部变量覆盖全局变量：startTimer函数里声明了var min = minutesLeft和var sec = secondsLeft，后续修改的是局部变量，根本没更新全局的minutesLeft和secondsLeft，导致每次调用都是初始值。
• 时间计算逻辑错误：min - 60和sec + 59没有赋值操作，等于白写；而且判断顺序反了，应该先处理秒数减到负数的情况，再处理分钟。
• 定时器停止条件无效：if(startTimer <= 0)是在判断函数对象，永远不会触发停止逻辑，应该判断剩余的分秒是否都为0。
• 语法错误：代码开头有多余的闭合}，会导致脚本执行异常。

修复后的完整代码 #

HTML部分 #

<!-- 计时器显示元素 -->
<h3 class="startTimer" id="startTimer">00:00:00</h3>

JavaScript部分 #

var minutesLeft = 0;
var secondsLeft = 59;
var startMazeBtn = document.getElementById("startMazeBtn");
var setTimer;

// 自定义计时器入口
entryPoint();

function entryPoint () {
    handleTimer();
}

function startTimer () {
    console.log("startTimerFired");
    // 直接操作全局变量，不用局部变量覆盖
    if (secondsLeft >= 0) {
        // 格式化时间显示，补零处理
        $("#startTimer").text(
            "00:" + 
            (minutesLeft < 10 ? "0" + minutesLeft : minutesLeft) + 
            ":" + 
            (secondsLeft < 10 ? "0" + secondsLeft : secondsLeft)
        );
        secondsLeft--;
    }
    // 秒数减到负数时，处理分钟
    if (secondsLeft < 0 && minutesLeft > 0) {
        minutesLeft--;
        secondsLeft = 59;
    }
    // 时间到了就停止定时器
    if (minutesLeft === 0 && secondsLeft < 0) {
        clearInterval(setTimer);
        // 时间结束后可以添加额外逻辑，比如显示提示
        $("#startTimer").text("时间到！");
    }
}

function handleTimer () {
    setTimer = setInterval(function() {
        startTimer();
    }, 1000);
}

修复说明 #

1. 去掉了多余的语法错误符号，保证脚本正常执行。
2. 直接操作全局的minutesLeft和secondsLeft，不再用局部变量覆盖，确保每次倒计时都会更新剩余时间。
3. 修正时间计算逻辑：秒数减到-1时，分钟减1，秒数重置为59。
4. 正确判断停止条件：当分钟和秒数都耗尽时，清除定时器，还可以添加时间结束后的提示。
5. 保留了原有的初始时间变量，满足读取并处理初始时间的需求。

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