直接操作目标 <td> 的 innerHTML 是最轻量可控的方式；需用唯一 ID 定位、毫秒数存倒计时、每秒更新、归零后清除定时器、每次回调先检查元素是否存在、多倒计时须闭包隔离、时间基准必须用服务端时间戳。
用 setInterval 定时更新 <td> 的 innerHTML
直接操作目标 <td> 元素的 innerHTML 是最轻量、最可控的方式。别用 document.write 或重绘整行，那会破坏 DOM 结构和事件绑定。
常见错误是把倒计时逻辑写在循环里却没保存定时器引用，导致无法清理；或用 setTimeout 递归但没做精度补偿，跑几分钟就慢半秒。
- 给目标
<td>加一个唯一id（比如id="countdown-1"），比用 class +querySelectorAll查找更稳 - 倒计时值建议存为毫秒数（
targetTime - Date.now()），避免每次 new Date() 创建对象开销 - 每秒更新一次即可，没必要
setInterval(fn, 100)—— 浏览器节流下实际也达不到，反而增加 CPU 负担
处理时间归零后自动停掉 clearInterval
倒计时结束却不清除定时器，会导致内存泄漏 + 后续逻辑错乱（比如按钮状态没同步、重复触发回调）。JS 不会自动停，必须手动干预。
典型现象：页面切到后台再切回来，发现倒计时跳变、或者控制台报 Cannot set property 'innerHTML' of null —— 很可能 DOM 已被移除，但定时器还在跑。
立即学习“前端免费学习笔记（深入）”；
- 每次进入
setInterval回调第一件事：检查目标<td>是否还存在（if (!el) { clearInterval(timer); return; }） - 归零判断用
remaining ，不是 <code>=== 0—— 网络延迟或 JS 执行卡顿可能导致跳过 0 - 归零后建议显式设为
"00:00"或插入自定义文案（如"已结束"），避免显示负数
格式化输出：用 padStart 避免手动拼字符串
写 h + ":" + (m 看似简单，但秒级倒计时里分钟/小时可能为 0，容易漏补零，且可读性差。
padStart 是现代浏览器标配（IE 不支持，但 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)，别用连除
多个倒计时共存时用闭包隔离状态
一个页面多个 <td> 倒计时，如果共用同一个 setInterval 和变量，必然互相干扰。常见错误是 for 循环里直接绑 setInterval 却没闭包，结果所有倒计时显示同一时间。
正确做法是每个倒计时独立启动、独立计时、独立清理。
- 遍历所有带
data-countdown属性的<td>，对每个元素调用初始化函数 - 初始化函数内声明自己的
timer、targetTime、el，形成闭包作用域 - 把
timer存到元素 dataset 里（el.dataset.timerId = timer;），方便后续统一销毁（比如页面卸载前）
最易被忽略的是时间基准 —— 别用服务端下发的“剩余秒数”直接累减，网络传输延迟会让各客户端起始时间不一致。务必用服务端时间戳（如 expires_at: "2025-04-05T12:00:00Z"），前端算 targetTime = new Date(data.expires_at).getTime()，才真正同步。
