倒计时异常源于定时器使用不当：未节流、未对齐系统时钟、未处理页面隐藏/唤醒导致的累积误差；应改用 Date.now() + 单次 setTimeout 动态计算下一次触发时间。
HTML 倒计时本身不冲突时间控制，冲突来自你用 setTimeout 或 setInterval 实现倒计时的方式 —— 尤其是没做节流、没对齐系统时钟、没处理页面隐藏/唤醒时的累积误差。
为什么倒计时会“跳秒”或“卡住”？
常见现象：倒计时从 10 秒突然跳到 7 秒，或暂停几秒后猛地补回；切换标签页再回来，倒计时直接归零或超时。
- 用
setInterval(fn, 1000)硬等 1 秒，但 JS 主线程阻塞时回调延迟，实际间隔可能变成 1200ms+，多次叠加就失步 - 页面进入后台（如切到其他 tab），浏览器会节流甚至暂停
setInterval，唤醒时不会补偿，导致“丢失时间” - 没用
Date.now()对比目标时间，而是靠“剩余秒数 - 1”递减，误差单向累积
用 Date.now() + 单次 setTimeout 替代循环定时器
核心思路：每次只设下一次更新，且更新时刻严格基于当前真实时间与目标时间的差值，不依赖上一次执行是否准时。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
function startCountdown(targetTimestamp) {
function tick() {
const now = Date.now();
const remainingMs = targetTimestamp - now;
if (remainingMs <= 0) {
render(0);
return;
}
const seconds = Math.ceil(remainingMs / 1000);
render(seconds);
// 下次更新时间 = 目标时间 - 1 秒，取整到最近的 100ms 边界，减少抖动
const nextTickAt = targetTimestamp - seconds * 1000 + 100;
setTimeout(tick, Math.max(10, nextTickAt - Date.now()));
}
tick();
}- 避免用
setInterval，改用链式setTimeout，每次重算延迟 -
Math.ceil(remainingMs / 1000)确保“还剩 N 秒”语义准确（比如剩 1001ms 仍显示 2 秒） - 加 100ms 偏移再取差值，是为了让刷新尽量落在视觉友好的时间点，减少肉眼可见的跳变
页面不可见时要不要暂停倒计时？
取决于业务逻辑：促销抢购必须严格按服务端时间走，不能暂停；倒计时提示（如“30 秒后自动关闭”）可暂停以提升用户体验。
立即学习“前端免费学习笔记（深入）”；
- 用
document.hidden检测页面可见性：if (document.hidden) { pause(); } - 但注意：暂停 ≠ 停止计时，只是停止渲染；真实剩余时间仍应基于
targetTimestamp - Date.now()动态计算 - 恢复时不要重置或补偿，直接继续渲染即可 —— 因为
Date.now()本身已包含后台耗时
最易被忽略的是服务端时间同步。前端 Date.now() 可能和服务器差几秒，倒计时终点若依赖本地时间，用户调快系统时间就能作弊。关键倒计时务必用服务端下发的 target_timestamp，并校验时钟偏移。
