倒计时须用 Date.now() 实时计算差值，禁用 setInterval 累减；卡片需 h-100 + flex-column + mt-auto 拉齐；数字块用 col-auto + min-width 防抖动；跳转用 stretched-link 保无障碍。
倒计时逻辑必须用 Date.now() 实时计算，别信 setInterval 累减
用户切到其他标签页再回来，setInterval 会卡顿、跳秒甚至变负数——浏览器后台节流会让 JS 暂停执行，但定时器 ID 还在跑。正确做法是每次触发都重算「当前时间戳距目标时间戳的差值」：Date.now() 比 new Date().getTime() 更轻量；目标时间必须存为毫秒级时间戳（如 Date.parse('2026-05-10T23:59:59')），不是字符串或 Date 对象，避免重复构造开销。
常见错误：
- 把
deadline写成'2026-05-10'字符串，每次调用都隐式 new Date()，性能掉点还易出错 - 用
Math.floor((endTime - startTime) / 1000)算秒数后直接减，没做Math.max(0, ...)，倒计时归零后继续显示负数 - 没在页面卸载前
clearInterval(timerId)，导致内存泄漏或更新已移除的 DOM 节点
卡片结构要用 flex-column + h-100 拉齐高度，别设 min-height
多张价格卡片并排时，描述行数不一会导致底部按钮高低错乱——这是纯靠 .card 默认流布局最常踩的坑。Bootstrap 5 不推荐给卡片硬设 min-height，小屏下会留大片空白，且破坏响应性。
实操方案：
- 外层
.card加h-100 -
.card-body改为class="card-body d-flex flex-column h-100" - 描述文字用
<p class="card-text flex-grow-1">...</p>吸满中间空间 - 价格和按钮用
mt-auto推到底部，不受上面内容长度影响
倒计时数字区域必须用 .col-auto + 固定宽高防抖动
直接套 .col-2 或 .col-sm-1 在 iPhone SE（375px 宽）上极易换行，数字“72”和“15”宽度不同，每秒重绘时视觉跳动明显。
正确写法：
- 每个数字块（天/时/分/秒）单独包一层
<div class="col-auto"> - 内部加
style="min-width: 56px;"（或用 CSS 变量统一控制） - 数字字体用
display-6或font-size: clamp(1.25rem, 4vw, 2.5rem)，兼顾小屏可读与大屏不溢出 - 单位文字（如“天”“时”）用
<small class="text-muted">，避免视觉权重压过数字
卡片整体跳转别用 onclick 或包裹 a 标签，stretched-link 是唯一合规解
给整个 .card 加 onclick="location.href='...'" 或套 <a href="..."><div class="card">...</div></a> 都违反 HTML5 块级嵌套规范，移动端 Safari 可能误判长按行为，屏幕阅读器也无法识别可点击区域。
Bootstrap 5 官方推荐方案：
- 在
.card-body内末尾或.card结束标签前插入：<a href="/product/123" class="stretched-link"></a> - 该链接无文字、不可见、不影响布局，但覆盖整个卡片内容区
- 支持键盘 Tab 聚焦 + Enter 触发，符合 WCAG 2.1
- 若需新窗口打开，加
target="_blank" rel="noopener noreferrer"，缺一不可
复杂点在于：如果卡片内已有按钮或链接，stretched-link 的 z-index 默认较低，不会拦截它们的点击——但如果你手动改过 z-index 或用了 position: relative 的父容器，就得检查层叠顺序是否被破坏。
