应使用 setInterval 实现倒计时，避免 setTimeout 递归导致跳秒或卡顿；核心是时间差计算与定时重绘，需用 Date.parse() 获取目标毫秒数，每次用 new Date().getTime() 计算差值，并在结束时 clearInterval。
用 setInterval 实现基础倒计时，别用 setTimeout 递归
直接用 setInterval 控制刷新节奏更稳，setTimeout 递归容易因执行延迟导致秒数跳变或卡顿。倒计时本质是「时间差计算 + 定时重绘」，不是每秒 setTimeout 一次。
关键点：
- 目标时间用
Date.parse()或直接写毫秒数，避免字符串解析歧义 - 每次循环用
new Date().getTime()获取当前时间戳，和目标时间做减法 - 倒计时结束时必须调用
clearInterval，否则定时器持续运行浪费资源 - 显示逻辑建议封装成独立函数，便于调试和复用
let timerId = null;
const endTime = Date.parse('2025-06-15T10:00:00');
function updateCountdown() {
const now = new Date().getTime();
const diff = endTime - now;
if (diff <= 0) {
document.getElementById('clock').textContent = '已结束';
clearInterval(timerId);
return;
}
const sec = Math.floor((diff / 1000) % 60);
const min = Math.floor((diff / (1000 * 60)) % 60);
const hr = Math.floor((diff / (1000 * 60 * 60)) % 24);
document.getElementById('clock').textContent = `${hr}:${min.toString().padStart(2,'0')}:${sec.toString().padStart(2,'0')}`;
}
timerId = setInterval(updateCountdown, 1000);HTML 结构要预留实时更新的 id，别用 class 或 textContent 直接覆盖
倒计时数字必须绑定到有明确 id 的元素上，比如 <span id="clock"></span>。用 class 查找在多实例场景下易冲突；用 textContent 替换整个父容器内容会破坏事件监听或内联样式。
常见错误：
立即学习“前端免费学习笔记（深入）”；
- 写成
document.querySelector('.time').innerText = ...→ 多个倒计时同时存在时只更新第一个 - 把倒计时塞进
<button>内部又没设id→ 后续无法精准定位 - 用
innerHTML插入带标签的内容 → 可能触发重复解析、XSS 风险（哪怕只是数字也别养成习惯）
处理时区问题：用 UTC 时间还是本地时间？
用户看到的“还剩 X 小时”必须和他本地感知一致。如果目标时间是「北京时间 6 月 15 日 10:00」，就用 '2025-06-15T10:00:00+0800' 显式带时区；如果用 '2025-06-15T10:00:00'（无时区），Date.parse() 会按用户本地时区解释，结果可能偏差 1–24 小时。
实操建议：
- 后端下发目标时间时，统一给 ISO 8601 带时区格式，如
"2025-06-15T10:00:00+08:00" - 前端不做时区转换，直接传给
new Date()构造 —— 浏览器会自动对齐本地时间 - 测试时手动改系统时区，看倒计时是否同步偏移（这是最有效的验证方式）
上线前必测：页面隐藏/切后台时倒计时是否暂停？
多数浏览器在标签页非激活状态下会节流 setInterval，间隔拉长到 1s 以上，导致倒计时“变慢”。这不是 bug，是浏览器省电策略。如果你需要高精度（比如拍卖倒计时），得监听 visibilitychange 事件，在切后台时记录暂停时刻，切回时补算差值。
轻量级方案（推荐大多数场景）：
- 不干预默认行为，接受小偏差（普通活动倒计时影响不大）
- 加一句提示：“页面非活跃时倒计时可能略有延迟”
- 真要精确，就放弃
setInterval，改用requestAnimationFrame+ 时间戳差值计算（但代码复杂度上升）
真正难处理的是跨天、跨月、闰秒这类边界，日常工具类倒计时只要盯住时区和 visibilitychange 就够用了。
