HTML无法实现倒计时逻辑，必须由JavaScript驱动；需用服务端时间戳校准、同步更新data-status属性、预先渲染失效态DOM并配合无障碍属性确保可靠性与体验一致性。
HTML里没法直接实现倒计时逻辑
倒计时不是HTML能干的事——<time></time> 标签只能标记时间点，不能自动更新、不能触发状态切换。所有“倒计时结束”“活动失效”的提示，必须靠JavaScript驱动，HTML只负责承载状态和样式。
常见错误现象：document.getElementById('countdown').innerText 一直不变；页面刷新后倒计时重置；服务端时间没对齐导致提前/延后失效。
- 用
Date.now()或服务端下发的截止时间戳（推荐），别用本地new Date('2024-12-31')字符串解析，易出时区偏差 - 倒计时每秒更新一次就够了，别用
setInterval(() => {}, 100)，浪费CPU还可能卡顿 - 失效判断必须在JS里做：比较当前时间戳与
endTimeStamp，而不是靠CSS类名或HTML属性“假装”已失效
怎么让HTML正确反映“活动已结束”状态
核心是把状态从JS同步到HTML结构上，而不是只改文字。否则屏幕阅读器读不到变化，SEO也抓不到真实状态，后续样式或行为扩展也受限。
使用场景：优惠券过期后按钮置灰、倒计时区域隐藏、显示「已结束」徽标、跳转链接失效。
立即学习“前端免费学习笔记（深入）”；
- 给容器加统一标识，比如
<div id="promo-banner" data-status="active">，JS更新时同步改 <code>data-status值为"expired" - 用CSS响应
[data-status="expired"] .countdown{ display: none; } 和[data-status="expired"] .expired-tip{ display: block; } - 千万别只改
innerHTML为“已结束”，不改状态属性——后续JS逻辑、自动化测试、无障碍访问全会漏判 - 首屏加载时，由后端在HTML里注入精准时间戳，例如：
<script>window.SERVER_TIME = 1735689240000;</script> - JS用它算初始偏移：
const offset = SERVER_TIME - Date.now();，之后所有时间判断都基于Date.now() + offset - 不建议用 NTP 协议或第三方时间API——移动端兼容差，且增加单点故障风险
- HTML里一开始就写好两套内容：
<div class="countdown">...</div> <div class="expired-tip" aria-hidden="true">活动已结束</div> - 用
aria-hidden="true"控制可访问性，配合tabindex="-1"防止键盘聚焦到失效元素 - 按钮失效时，除了加
disabled，还得加aria-disabled="true"，否则VoiceOver仍会把它当可操作项读出来
服务端时间不准会导致倒计时错乱
用户手机时间被手动调快/调慢，或系统时钟不同步，纯前端倒计时就不可信。促销活动尤其要防这个。
性能 / 兼容性影响：每次倒计时更新都去请求服务端时间？不行，HTTP开销大、延迟高、还可能失败。
倒计时DOM结构要预留“失效态”占位
很多团队等倒计时归零才动态插入「已结束」文案，结果布局抖动、按钮跳位、甚至触发iOS Safari的输入框意外聚焦。
容易踩的坑：用 display: none 切换但没设固定高度；用 visibility: hidden 却忘了禁用按钮的 click 事件。
事情说清了就结束。真正难的不是写倒计时，是让时间判断可靠、状态同步无遗漏、失效体验不突兀——这三处随便漏一个，用户就可能抢不到券、误以为还能用、或者根本没看到提示。
