如何实现倒计时结束后自动切换至下一个目标日期继续倒计时？

给你改好的代码，直接用就行，能实现第一个日期倒计时归0后自动切到下一个目标日期：

function countDown() {
    // 把所有要倒计时的日期按顺序放进数组里，格式和你原来的一致
    var targetDates = [
        "feb 10, 2024 23:24:00",
        "mar 15, 2024 10:00:00",
        "apr 20, 2024 18:30:00"
    ];
    var currentIndex = 0; // 当前正在倒计时的日期索引
    var countDownDate = new Date(targetDates[currentIndex]).getTime();

    var x = setInterval(function() {
        var now = new Date().getTime();
        var distance = countDownDate - now;

        // 检查是否倒计时归0或者已过期
        if (distance <= 0) {
            currentIndex++; // 切换到下一个日期
            if (currentIndex < targetDates.length) {
                // 还有下一个日期，更新目标时间
                countDownDate = new Date(targetDates[currentIndex]).getTime();
                // 重新计算距离值，避免显示0之后才切换
                distance = countDownDate - now;
            } else {
                // 所有日期都倒计时完了，停止计时器并提示
                clearInterval(x);
                document.getElementById("timer").innerHTML = "所有倒计时已结束";
                return;
            }
        }

        // 计算时分秒，和你原来的逻辑一致
        var h = Math.floor(distance / (1000 * 60 * 60));
        var m = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        var s = Math.floor((distance % (1000 * 60)) / 1000);
        h = addZero(h);
        m = addZero(m);
        s = addZero(s);
        document.getElementById("timer").innerHTML = h + ":" + m + ":" + s;
    }, 1000);

    // 补零函数，保留你原来的实现
    function addZero(i) {
        if (i < 10) {i = "0" + i};  
        return i;
    }
}

关键改动说明 #

• 新增targetDates数组：把所有需要倒计时的日期按顺序放进去，后续要加新日期直接往数组里追加就行
• 新增currentIndex：用来记录当前正在倒计时的是数组里的第几个日期
• 倒计时切换逻辑：每次检测到倒计时归0时，自动切换到下一个日期；如果所有日期都倒计时完毕，就停止计时器并显示结束提示
• 完全保留了你原来的时分秒计算和补零逻辑，不用改动其他页面元素

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