倒计时结束须用 JavaScript 真实禁用按钮并变灰，通过 setInterval 控制，服务端下发截止时间防作弊，显示 mm:ss 格式，兼容 IE 需降级 padStart 和 dataset，移动端用 performance.now() 校准，并以服务端响应为准同步状态。
倒计时结束自动禁用按钮并变灰
核心是用 JavaScript 控制 disabled 属性和 style.opacity（或 style.pointerEvents），不能只靠 CSS 动画假装禁用——用户仍能右键“检查元素”后手动删掉 disabled 并点击。真实禁用必须由 JS 在倒计时归零时写入 DOM。
- 倒计时用
setInterval，但记得在倒计时结束或组件卸载时调用clearInterval，否则内存泄漏 - 时间建议从服务端下发（比如
data-end-time="2024-06-15T14:30:00Z"），避免用户改本地时间作弊 - 显示格式推荐
mm:ss，两位数补零：用String(num).padStart(2, '0')，别手写num
按钮文字随倒计时动态更新
直接操作 button.textContent 最简单，但要注意中文标点宽度和换行问题。如果设计要求文字居中且按钮宽度固定，建议用 white-space: nowrap; overflow: hidden; 防止“00:01”比“加入购物车（限时）”窄导致按钮跳动。
- 初始文案建议存为 data 属性：
data-default-text="加入购物车"，方便重置或国际化 - 倒计时中文案示例：
加入购物车（${mm}:${ss}），括号用全角更协调 - 归零后文案设为
已结束或活动已过期，别留空或只写“00:00”
点击后防止重复提交 + 同步倒计时状态
用户可能在倒计时最后 1 秒狂点，disabled 虽已设，但若 JS 执行稍慢，仍可能触发多次 click 事件。稳妥做法是在事件监听器开头加守卫：
let isSubmitting = false;
button.addEventListener('click', () => {
if (isSubmitting || button.disabled) return;
isSubmitting = true;
// 发请求...
fetch('/cart/add', { method: 'POST' })
.finally(() => isSubmitting = false);
});
- 服务端返回成功后，即使倒计时还没走完，也应立即禁用按钮并更新文案——以服务端为准
- 若需全局同步（比如多个同类按钮），用自定义事件
dispatchEvent(new Event('countdown-ended'))通知其他模块
兼容性注意：IE 不支持 padStart 和 dataset
如果项目还要支持 IE11，padStart 得降级，dataset 要改用 getAttribute('data-end-time')。另外 new Date() 解析 ISO 字符串在 IE 中不稳定，建议用 new Date(dateStr.replace(/-/g, '/')) 或直接传时间戳。
立即学习“前端免费学习笔记（深入）”；
- 倒计时逻辑别塞在
DOMContentLoaded里——等 DOM 加载完再启动，可能已错过前几秒 - 移动端 Safari 对
setInterval(fn, 1000)实际间隔可能漂移到 1200ms+，用performance.now()校准更准
