页面卡顿因 setInterval 频繁操作 innerHTML 或触发重排；应改用 textContent、1000ms 间隔、确保元素存在；CSS 优选等宽字体、font-size/line-height、color/text-shadow；12/24 小时制用 getHours() % 12 || 12 和条件判断 AM/PM。
用 setInterval 更新时间时为什么页面卡顿？
直接在 setInterval 里频繁操作 innerHTML 或触发重排（如修改 style.color）会导致渲染压力，尤其在低配设备上明显卡顿。关键不是“要不要更新”，而是“怎么更新更轻量”。
- 只更新文本内容，避免修改结构或样式属性；用
textContent替代innerHTML（更安全、更快） - 间隔设为
1000毫秒，别用100或50——人眼分辨不了毫秒级变化，反而徒增负担 - 确保目标元素已存在再执行更新，否则会报
Cannot set property 'textContent' of null
CSS 控制时间显示样式时哪些属性最实用？
时间文本通常需要高可读性+轻量适配，不建议堆砌复杂动画或渐变。重点用好这几个基础属性：
-
font-family：优先选等宽字体（如'Courier New', monospace），让数字对齐稳定，避免宽度跳动 -
font-size和line-height配合使用，比如font-size: 1.5rem; line-height: 1.2;，防止多行时间（如带日期）挤在一起 -
color和text-shadow组合提升对比度，例如color: #fff; text-shadow: 0 0 4px rgba(0,0,0,.5); - 避免用
width/height固定尺寸，改用min-width防止长格式（如2024年10月25日 星期五 14:38:22）溢出
如何让时间自动适配 12 小时制 / 24 小时制？
浏览器原生 Date 对象不直接提供带 AM/PM 的格式化方法，得自己处理。别用正则替换，容易漏掉边界情况（比如 12:00 是中午还是午夜）。
- 判断小时数：
date.getHours() % 12 || 12得到 12 小时制小时，date.getHours() >= 12 ? 'PM' : 'AM'判断时段 - 补零统一用
String(num).padStart(2, '0')，比num 更可靠 - 如果项目已引入
Intl.DateTimeFormat，推荐用它——自动按用户系统语言和地区习惯格式化，例如：new Intl.DateTimeFormat('zh-CN', { hour12: true, hour: '2-digit', minute: '2-digit', second: '2-digit' }).format(new Date())
刷新后时间重置成 00:00:00？检查这三处
这不是样式问题，而是逻辑错误。常见于把时间初始化写在定时器外部但没实时取值。
立即学习“前端免费学习笔记（深入）”；
- 别这样写：
const now = new Date(); // ❌ 只执行一次，后续永远不变
而要在setInterval回调里每次重新调用new Date() - DOM 元素选择器写错，比如
document.getElementById('clock')返回null，但代码没做空值判断，导致静默失败 - 脚本放在
<head>里且没加defer，执行时 DOM 还没加载完，查找不到目标元素
