使用JavaScript实现基于JSON配置的连续计时器

<div class="output"></div>

const timers = [
    {
        "id": "1",
        "title": "countdown 1",
        "hour": "0",
        "minute": "0",
        "second": "4"
    },
    {
        "id": "2",
        "title": "countdown 2",
        "hour": "0",
        "minute": "0",
        "second": "4"
    },
    {
        "id": "3",
        "title": "countdown 3",
        "hour": "0",
        "minute": "0",
        "second": "4"
    }
];

const output = document.querySelector(".output"); // 获取显示输出的DOM元素
let interval; // 用于存储setInterval的ID，以便后续清除
let curTimer = 0; // 当前正在执行的计时器的索引
let maxSeconds = 0; // 当前计时器的总秒数
let thisTimer; // 当前计时器的JSON数据对象

// 计时器配置数据
const timers = [
    {
        "id": "1",
        "title": "countdown 1",
        "hour": "0",
        "minute": "0",
        "second": "4"
    },
    {
        "id": "2",
        "title": "countdown 2",
        "hour": "0",
        "minute": "0",
        "second": "4"
    },
    {
        "id": "3",
        "title": "countdown 3",
        "hour": "0",
        "minute": "0",
        "second": "4"
    }
];

/**
 * 更新页面上显示的倒计时信息。
 */
const displayTime = () => {
  // 格式化显示剩余秒数和计时器标题
  const hours = Math.floor(maxSeconds / 3600);
  const minutes = Math.floor((maxSeconds % 3600) / 60);
  const seconds = maxSeconds % 60;

  const formattedTime = [hours, minutes, seconds]
    .map(unit => String(unit).padStart(2, '0')) // 确保两位数显示
    .join(':');

  output.innerHTML = `${formattedTime} - ${thisTimer.title}`;
};

/**
 * 核心计时器函数，以递归方式处理计时器序列。
 * @param {Array} timersArray - 包含所有计时器配置的数组。
 * @param {number} currentIndex - 当前要启动的计时器的索引。
 */
const timer = (timersArray, currentIndex) => {
  // 获取当前计时器的配置数据
  thisTimer = timersArray[currentIndex];

  // 计算当前计时器的总秒数
  maxSeconds = (parseInt(thisTimer.hour) * 3600) + 
               (parseInt(thisTimer.minute) * 60) + 
               parseInt(thisTimer.second);

  // 启动计时器
  interval = setInterval(() => {
    displayTime(); // 更新显示
    maxSeconds--; // 剩余秒数递减

    // 当计时器完成时
    if (maxSeconds < 0) {
      clearInterval(interval); // 清除当前计时器

      // 检查是否还有下一个计时器
      if (curTimer < timersArray.length - 1) {
        curTimer++; // 移动到下一个计时器索引
        timer(timersArray, curTimer); // 递归调用自身，启动下一个计时器
      } else {
        // 所有计时器都已完成
        output.innerHTML = "DONE - 所有倒计时完成！";
        // 在这里可以添加页面重定向逻辑，例如：
        // window.location.href = "https://your-redirect-url.com";
      }
    }
  }, 1000); // 每秒执行一次
};

// 启动第一个计时器
timer(timers, curTimer);