如何用JSON配置实现JavaScript/jQuery连续倒计时并跳转？

问题出在forEach会同步触发所有倒计时，导致多个计时器同时运行互相干扰，无法实现逐个连续执行的效果。要实现串行的倒计时，我们需要在上一个倒计时完全结束后再启动下一个，用递归就能解决这个问题。

以下是适配你需求的完整代码：

HTML 结构 #

<div class="countdown-container">
  <h2 id="countdown-title"></h2>
  <div id="countdown-timer">
    <span class="hour">00</span>:<span class="minute">00</span>:<span class="second">00</span>
  </div>
</div>

JavaScript 代码 #

// 你的配置数组
const countdownConfigs = [
    {
        "id": "1",
        "title": "countdown 1",
        "hour": "0",
        "minute": "0",
        "second": "10"
    },
    {
        "id": "2",
        "title": "countdown 2",
        "hour": "0",
        "minute": "0",
        "second": "10"
    },
    {
        "id": "3",
        "title": "countdown 3",
        "hour": "0",
        "minute": "0",
        "second": "10"
    }
];

// 获取DOM元素
const titleEl = document.getElementById('countdown-title');
const hourEl = document.querySelector('.hour');
const minuteEl = document.querySelector('.minute');
const secondEl = document.querySelector('.second');

// 递归执行倒计时的函数
function runCountdown(index) {
    if (index >= countdownConfigs.length) {
        // 所有倒计时完成，跳转页面
        window.location.href = '你的目标页面地址'; // 替换为实际跳转链接
        return;
    }

    const config = countdownConfigs[index];
    // 设置当前倒计时标题
    titleEl.textContent = config.title;

    // 转换为总秒数，方便递减计算
    let totalSeconds = parseInt(config.hour) * 3600 + parseInt(config.minute) * 60 + parseInt(config.second);

    const timer = setInterval(() => {
        if (totalSeconds <= 0) {
            clearInterval(timer);
            // 当前倒计时结束，启动下一个
            runCountdown(index + 1);
            return;
        }

        // 计算剩余时分秒并补零
        const hours = Math.floor(totalSeconds / 3600).toString().padStart(2, '0');
        const minutes = Math.floor((totalSeconds % 3600) / 60).toString().padStart(2, '0');
        const seconds = (totalSeconds % 60).toString().padStart(2, '0');

        // 更新DOM显示
        hourEl.textContent = hours;
        minuteEl.textContent = minutes;
        secondEl.textContent = seconds;

        totalSeconds--;
    }, 1000);
}

// 启动第一个倒计时
runCountdown(0);

核心逻辑说明 #

• 用递归函数runCountdown替代forEach，每次仅处理一个配置项，当前倒计时结束后再递归启动下一个，确保串行执行。
• 将时分秒转换为总秒数，避免单独处理时/分/秒的边界进位问题，简化递减逻辑。
• 每个倒计时结束时立即清除当前计时器，防止多个计时器同时运行干扰。

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