如何在HTML站点运行同一倒计时脚本的多个实例适配不同元素

原脚本是硬编码了目标元素和倒计时时间的自执行函数，仅支持单倒计时场景，重复复制修改变量名的方式冗余度高，很容易因为漏改绑定ID、变量冲突导致无输出。

我们可以把倒计时逻辑封装成可复用的函数，支持传入绑定元素ID和目标时间，需要多少个倒计时就调用多少次即可，还修复了原代码小时取模错误的问题： #

第一步：编写HTML倒计时容器 #

给每个倒计时模块设置独立ID：

<!-- 第一个倒计时容器 -->
<div id="countdown1"></div>
<!-- 第二个倒计时容器 -->
<div id="countdown2"></div>

第二步：编写可复用的JS逻辑 #

// 补0工具函数，抽离出来全局复用
function pad(num) {
  return ("0" + parseInt(num)).substr(-2);
}

/**
 * 通用倒计时创建函数
 * @param {string} elementId 绑定的HTML元素ID
 * @param {number} hour 倒计时目标小时
 * @param {number} minute 倒计时目标分钟
 */
function createCountdown(elementId, hour, minute) {
  // 每个倒计时维护独立的目标时间变量，闭包隔离不会互相冲突
  let targetTime = new Date();
  targetTime.setHours(hour, minute, 0);

  function tick() {
    const now = new Date();
    // 过了当天目标时间就自动顺延到第二天
    if (now > targetTime) {
      targetTime.setDate(targetTime.getDate() + 1);
    }
    const remainSeconds = (targetTime - now) / 1000;
    const hh = pad((remainSeconds / 3600) % 24);
    const mm = pad((remainSeconds / 60) % 60);
    const ss = pad(remainSeconds % 60);
    const el = document.getElementById(elementId);
    // 元素存在才更新内容，避免找不到元素时报错
    if (el) el.textContent = `${hh}:${mm}:${ss}`;
    setTimeout(tick, 1000);
  }
  return tick;
}

// 页面加载完成后初始化所有倒计时
document.addEventListener('DOMContentLoaded', () => {
  // 第一个倒计时：绑定countdown1元素，目标时间15:10
  createCountdown('countdown1', 15, 10)();
  // 第二个倒计时：绑定countdown2元素，目标时间23:00
  createCountdown('countdown2', 23, 0)();
  // 后续新增倒计时只要再加一行调用即可
});

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