HTML倒计时计时器故障求助：运行后停止显示默认值

嘿，我帮你排查出了几个导致计时器运行一段时间后停止并显示默认值的问题，咱们一个个来修复：

问题1：DOM元素选择错误 #

你的HTML里倒计时容器用的是class="countdown"，但JS代码里却用document.getElementById("countdown")来获取元素——这会直接找不到目标元素，导致后续的更新操作完全失效。

修复方案：把HTML里的class="countdown"改成id="countdown"，这样JS就能正确定位到元素：

<div id="countdown">00 : 00 : 00 : 00</div>

问题2：变量名拼写错误 #

在处理小时数补零的代码里，你写了h = "0" + hours;，但hours这个变量根本没定义过！这会抛出ReferenceError，直接导致整个sec函数停止执行，计时器自然就停在默认值了。

修复方案：把hours改成h：

if (h < 10 ) {h = "0" + h;}

问题3：未处理倒计时结束的场景 #

当目标时间（Dec 8, 2020）已经过去，diff会变成负数，但你的代码没有清除计时器，也没有更新显示内容，这可能导致后续的计算出现异常。

修复方案：在diff <= 0时清除计时器，并更新显示：

if (diff > 0){
    // 原有的日期计算代码
} else {
    clearInterval(t);
    document.getElementById("countdown").innerHTML = "EXPIRED";
}

完整修正后的JS代码 #

let newDate = new Date("Dec 8, 2020 00:00:00").getTime(); 
let t = setInterval(sec, 1000); 

function sec () { 
    let todayDate = new Date().getTime(); 
    let diff = newDate - todayDate; 

    if (diff > 0){ 
        let d = Math.floor(diff / (1000 * 60 * 60 * 24)); 
        if (d < 10) { d = "0" + d;} 

        let h = Math.floor(((diff % (1000 * 60 * 60 * 24)) / (1000*60*60))); 
        if (h < 10 ) {h = "0" + h;} // 修复了变量名错误

        let m = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60)); 
        if(m <10) {m = "0" + m;} 

        let s = Math.floor((diff % (1000 * 60)) / 1000); 
        if (s < 10 ){s = "0" + s;} 

        let newTime = `${d} : ${h} : ${m} : ${s}` 
        document.getElementById("countdown").innerHTML = newTime; 
    } else {
        // 倒计时结束时清除计时器并更新显示
        clearInterval(t);
        document.getElementById("countdown").innerHTML = "EXPIRED";
    }
}

这些修复应该能让你的计时器稳定运行，直到目标时间结束为止。

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