Bootstrap响应式倒计时器无法停在0的技术求助

你的倒计时器无法停止的核心问题是setInterval会持续执行，即便倒计时已经结束，而且没有处理时间差为负数的情况。只需在现有代码中添加停止判断逻辑即可解决：

修改后的完整代码 #

// 设置目标倒计时时间
var target_date = new Date("10-24-2022 21:50:20").getTime();

// 时间单位变量
var days, hours, minutes, seconds;

// 获取显示倒计时的元素
var countdown = document.getElementById("countdown");

// 存储定时器实例，用于后续停止计时
var timer = setInterval(function () {
    // 计算当前时间与目标时间的秒数差
    var current_date = new Date().getTime();
    var seconds_left = (target_date - current_date) / 1000;

    // 判断是否已到倒计时结束时间
    if (seconds_left <= 0) {
        // 停止定时器
        clearInterval(timer);
        // 将所有时间单位设为0
        days = 0;
        hours = 0;
        minutes = 0;
        seconds = 0;
    } else {
        // 正常计算各时间单位
        days = parseInt(seconds_left / 86400);
        seconds_left = seconds_left % 86400;

        hours = parseInt(seconds_left / 3600);
        seconds_left = seconds_left % 3600;

        minutes = parseInt(seconds_left / 60);
        seconds = parseInt(seconds_left % 60);
    }

    // 更新倒计时显示内容
    countdown.innerHTML =
        '<span class="days">' +
        days +
        ' <label>Days</label></span> <span class="hours">' +
        hours +
        ' <label>Hours</label></span> <span class="minutes">' +
        minutes +
        ' <label>Minutes</label></span> <span class="seconds">' +
        seconds +
        ' <label>Seconds</label></span>';
}, 1000);

关键改动说明 #

• 新增timer变量存储setInterval的返回值，这样可以通过clearInterval(timer)主动停止定时器。
• 添加seconds_left <= 0的判断逻辑，一旦倒计时结束：
  1. 调用clearInterval(timer)终止计时循环；
  2. 将所有时间单位强制设为0，确保显示停在0点状态，不会出现负数。

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