倒计时必须用服务端下发的带时区时间戳锚定，结合 setinterval 动态重算剩余毫秒，并监听 visibilitystate 暂停/恢复，禁止手动递减或本地解析时间字符串。
产品发布倒计时页面不能靠 setTimeout 递归或手动递减变量来实现，必须用时间戳锚定 + setInterval 动态重算，否则切后台、页面卡顿、时区错位都会导致倒计时漂移甚至跳秒。
目标时间必须用带时区的毫秒级时间戳
新品发布通常有明确举办地（比如北京发布会），用户全球分布。若写成 new Date('2025-12-31T10:00:00')，欧美用户本地解析会变成当地时间，倒计时全乱。
- 正确写法是显式指定时区偏移：
new Date('2025-12-31T10:00:00+0800').getTime() - 更稳妥的是服务端返回目标时间戳（如
{"target_ts": 1735639200000}），前端直接使用，彻底规避客户端解析歧义 - 别用
Date.parse()解析非 ISO 标准字符串（如"2025/12/31"），Safari 兼容性差
每次更新都要重新计算剩余毫秒数
不要维护一个 secondsLeft 变量然后每秒 --，JS 定时器不保证精确 1000ms 执行，失焦后可能一次跳过几十秒。
- 固定目标时间戳
const targetTime = 1735639200000 - 在
setInterval回调里始终用Math.max(0, targetTime - Date.now())算剩余毫秒 - 用
Math.floor(remainingMs / (1000 * 60 * 60 * 24))算天数，别用parseInt——它会截断小数，导致最后几小时显示为 0 天 - 单位换算后手动补零：
String(hours).padStart(2, '0')，不用toLocaleTimeString（受系统设置干扰）
DOM 更新要防抖动和内存泄漏
倒计时数字频繁更新，DOM 操作不当会导致视觉闪烁或崩溃，尤其低端安卓机或 iOS Safari。
- 每个时间单位（天、时、分、秒）用独立
<span id="cd-days"></span>节点，只更新textContent，避免整块innerHTML重写 - 加 CSS
font-variant-numeric: tabular-nums，保证数字等宽，防止「9」变「10」时整体右移 - 必须存住
setInterval返回的 ID，并在倒计时结束、页面卸载、组件销毁前调用clearInterval(timerId) - 监听
document.visibilityState：页面隐藏时暂停定时器，显示时立刻重算并更新 UI，避免切回来直接跳到 0
结束逻辑必须解耦且不可信前端
新品发布倒计时结束 ≠ 立刻开放购买。按钮点击、接口请求、库存校验全部由后端控制，前端倒计时只是提示层。
- 结束回调设计成参数：
startCountdown(targetTime, { onEnd: () => showLaunchPage() }) - 音效需预加载：
const audio = new Audio('/sound/launch.mp3'); audio.load();，别在onEnd里临时new（iOS Safari 静音无提示） - 禁止把倒计时剩余值作为权限判断依据——用户可改本地时间或 JS 变量绕过，所有关键动作必须走后端接口二次校验
- 如果倒计时用于“限量预约”，结束后的表单提交仍需携带服务端签发的 token，而非仅依赖前端状态
最常被忽略的是服务端时间锚定和 visibilityState 响应。哪怕代码逻辑全对，只要没处理页面失焦重算，用户切走再回来就大概率看到错误归零；只要没校验服务端时间，全球用户看到的“同一场发布会”就根本不是同一时刻。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
