time标签仅语义化静态时间，倒计时需JavaScript实时计算并更新DOM；必须用ISO 8601格式datetime，每轮重算时间差防漂移，拆分DOM节点更新、校准服务端时间确保准确。
time 标签不能实现倒计时，它只负责语义化标记静态时间点；真要动起来，必须靠 JavaScript 读取 datetime 属性、实时计算差值并更新 DOM。
为什么直接写 <time datetime="2026-12-25">圣诞倒计时</time> 不会动
time 是纯语义标签，浏览器不会自动解析它做计时。常见错误包括：
– 把 datetime 填成“还有 100 天”这类相对描述（违反规范，必须是 ISO 8601 格式，如 2026-12-25T00:00:00+08:00）
– 页面里放了 <time id="target"></time> 却没配 JS，结果永远静止
– 在旧浏览器（如 IE）里用 element.dateTime 读取失败，应 fallback 到 element.getAttribute('datetime')
倒计时 JS 逻辑怎么写才不漂移
别用 setInterval(() => sec--, 1000) 这类累减方式——页面切后台、JS 被节流、某次渲染卡顿，都会导致跳秒或卡住。
正确做法是每次回调都重新算剩余毫秒数：
– 用 new Date(targetElement.getAttribute('datetime')) 解析目标时间（兼容 IE）
– 每次执行 const now = new Date(); const diff = target - now;
– 只在 diff > 0 时更新 UI，否则 clearInterval(timerId)
– 推荐用 setInterval（不用 requestAnimationFrame），但必须每轮都重读当前时间戳
DOM 结构怎么设计才能防抖动、易维护
避免把整个倒计时塞进一个 <div> 然后用 innerHTML 整段替换，那样容易触发重排、数字跳位。
推荐拆成独立节点：
– 每个时间单位单独包裹：<span class="days">00</span>天<span class="hours">00</span>时<span class="minutes">00</span>分<span class="seconds">00</span>秒
– 更新时只改对应 textContent，不碰结构
– 加 CSS font-variant-numeric: tabular-nums，保证“0”和“9”等宽，防止闪烁
– 不要用 input 或 contenteditable，它们引入焦点干扰
立即学习“前端免费学习笔记（深入）”；
服务端时间校准为什么不能省
用户手机时间不准、手动改系统时间、页面长时间挂后台，都会让纯前端倒计时失效。抢购或关键活动必须锚定服务端：
– 首次加载时 fetch /api/event，拿到 { end_time: 1798464000000 }（毫秒时间戳）和 server_time
– 计算本地与服务端偏移：const offset = serverTime - Date.now()
– 每次更新时用 Date.now() + offset 估算服务端当前时间
– 剩余时间 = endTime - (Date.now() + offset)
– 按钮禁用、库存提示等交互，最终开关必须由后端响应决定，前端只负责展示
