用 setInterval 定时更新 td 的 innerHTML

直接操作目标 `` 元素的 `innerHTML`，是最轻量也最可控的方式。应避免使用 `document.write` 或整行重绘，以免破坏DOM结构和事件绑定。 常见误区包括：在循环中编写倒计时逻辑却未保存定时器引用，导致无法停止；或使用 `setTimeout` 递归且未做精度补偿，使倒计时逐步偏移。 以下是几个实战建议： * 为目标 `` 添加唯一 `id`（如 `id="countdown-1"`），比通过 `class` 加 `querySelectorAll` 查找更稳定。 * 倒计时值建议存储为毫秒数（`targetTime - Date.now()`），避免频繁 `new Date()` 带来的性能开销。 * 每秒更新一次已足够，无需使用 `setInterval(fn, 100)`。浏览器节流下实际精度也无法达到，反而增加CPU负担。

处理时间归零后自动停掉 clearInterval

倒计时结束后不清理定时器，会导致内存泄漏和逻辑混乱（如按钮状态不同步、回调重复触发）。JavaScript不会自动清理，必须手动处理。 典型场景：页面切到后台再切回，倒计时跳变或控制台报 `Cannot set property 'innerHTML' of null`。这通常是因为DOM已被移除，但定时器仍在执行。 因此，需注意两个关键点： * 每次进入 `setInterval` 回调，首先检查目标 `` 是否存在：`if (!el) { clearInterval(timer); return; }`。 * 归零判断使用 `remaining <= 0`，而非 `=== 0`。因网络延迟或JS执行阻塞，可能跳过精确的0值。 * 归零后，建议显示为 `"00:00"` 或自定义文案（如 `"已结束"`），避免出现负数。

格式化输出：用 padStart 避免手动拼字符串

手动拼接 `h + ":" + (m < 10 ? "0" : "") + m` 虽简单，但秒级倒计时中分钟/小时可能为0，容易遗漏补零，且可读性差。 `padStart` 是现代浏览器的标准方法（IE已淘汰，无需兼容），一行代码即可完成补零，语义明确。 * 推荐封装为小函数：`const fmt = n => String(n).padStart(2, "0");` * 计算时优先转为整数：`const secs = Math.max(0, Math.floor(remaining / 1000));`，避免浮点误差影响取整。 * 若需支持天数，拆解顺序应为：`days = Math.floor(secs / 86400)` → `hours = Math.floor((secs % 86400) / 3600)`，避免连除运算。

多个倒计时共存时用闭包隔离状态

当页面上有多个 `` 需要倒计时时，若共用同一个 `setInterval` 和变量，必然互相干扰。常见错误是在for循环中直接绑定 `setInterval` 却未使用闭包，导致所有倒计时显示相同时间。 正确做法是每个倒计时独立启动、独立计时、独立清理。 * 遍历所有带 `data-countdown` 属性的 ``，对每个元素调用初始化函数。 * 初始化函数内声明自己的 `timer`、`targetTime`、`el`，形成闭包作用域。 * 将 `timer` 存入元素 dataset 中（`el.dataset.timerId = timer;`），便于后续统一销毁（如页面卸载前）。 最易忽略的是时间基准。切勿直接使用服务端下发的“剩余秒数”进行累减，网络传输延迟会使各客户端起始时间不一致。务必使用服务端时间戳（如 `expires_at: "2025-04-05T12:00:00Z"`），前端计算 `targetTime = new Date(data.expires_at).getTime()`，这才是真正的同步。