实现高精度时钟需用 requestAnimationFrame 配合时间戳判断整秒更新，避免 setInterval 的累积误差和后台耗电；格式化须手动补零、正确处理12/24小时制及星期月份偏移，并检查DOM存在性与清理定时器。
直接用 Date 对象 + setInterval 就能实现，但关键不在“能不能动”，而在“动得准不准”“格式控不控制得住”“页面切走后还耗不耗资源”。下面说清楚怎么做、为什么这么选、哪些地方一不留神就翻车。
怎么用 setInterval 每秒更新时间显示
这是最常用也最容易出问题的方式。不是简单写个 setInterval(() => { ... }, 1000) 就完事——浏览器实际执行间隔可能偏移几十毫秒，连续跑几小时后，显示时间和系统时间可能差1–2秒。
- 必须把时间获取和格式化逻辑封装进函数，避免闭包中引用过期的
Date实例 - 别在
setInterval回调里直接拼字符串，先调new Date()，再取值，再格式化 - 如果只显示时分秒，用
getHours()、getMinutes()、getSeconds()更可控；用toLocaleTimeString()虽快，但受用户系统区域设置影响，比如中文系统可能带“上午/下午”，英文系统可能用 AM/PM - 补零必须做：
String(d.getMinutes()).padStart(2, '0')，不能靠toString()或+拼接，否则 9 分会变成"9:5:3"
为什么 requestAnimationFrame 比 setInterval 更适合高精度时钟
当你要做秒针平滑转动、或需要和动画帧对齐（比如配合 CSS transform 动画），setInterval 的固定 1000ms 周期反而会造成跳帧或卡顿。
-
requestAnimationFrame每次在屏幕重绘前触发，频率由显示器刷新率决定（通常是 60fps），更适合视觉同步 - 它本身不保证每秒执行 60 次，所以得自己判断是否过了整秒：
if (now - lastUpdate >= 1000)，再更新 DOM - 必须手动记录上一次更新时间戳（
lastUpdate = now），不能依赖计数器，否则误差会累积 - 页面不可见时（用户切到其他 tab），
requestAnimationFrame会被暂停，天然省电；而setInterval不会，得监听visibilitychange手动clearInterval
怎么安全地切换 12 小时制和 24 小时制
用布尔变量控制格式看似简单，但容易漏掉两个关键点：AM/PM 的大小写一致性、午夜与正午的特殊处理。
立即学习“前端免费学习笔记（深入）”；
- 小时值为 0 时，12 小时制应显示为
12（不是0），且是AM；小时为 12 时，应显示为12，且是PM - 别用
hour % 12直接算显示小时——0 % 12 === 0，得单独判断：hour === 0 ? 12 : hour > 12 ? hour - 12 : hour - AM/PM 建议统一用大写
'AM'/'PM'，避免部分字体下小写字母am/pm显示过细难读 - 切换模式后，要立刻调用一次更新函数，不能等下一秒才生效
日期+星期+时间全字段格式化要注意什么
加年月日和星期不难，但中文星期名、月份名、以及跨月/跨年边界容易出错。
-
getMonth()返回 0–11，必须+ 1；getDate()是 1–31，不用加 - 星期几用
getDay()，返回 0（周日）到 6（周六），中文映射数组建议写死：['星期日', '星期一', ..., '星期六']，别用toLocaleDateString('zh-CN', { weekday: 'long' })——它依赖运行环境语言，服务端渲染或离线时可能 fallback 成英文 - 年份用
getFullYear()，别用getYear()（已废弃，返回的是距 1900 年的偏移量） - 如果页面要支持多时区，别改
Date对象本身（它始终是本地时区），改用Intl.DateTimeFormat格式化，传{ timeZone: 'Asia/Shanghai' }等参数
最常被忽略的是：时间更新函数里没做空元素检查，DOM 元素还没加载完就执行 document.getElementById('clock')，结果 null.innerHTML 报错；还有就是忘记清理定时器，页面反复进出导致多个 setInterval 同时跑。这些细节比格式本身更影响稳定性。
