实时时钟应使用 setInterval 而非 setTimeout 递归，设间隔为1000毫秒，每次用 new Date() 获取本地时间并调用 getHours()/getMinutes()/getSeconds() 格式化，避免使用 UTC 方法导致时区错误。
用 setInterval 更新页面时间，别用 setTimeout 递归
实时时钟的核心是「持续触发更新」，setInterval 是最直接的选择。有人用 setTimeout 在回调里再调自己，容易因执行延迟导致秒针跳变或卡顿，尤其在页面切到后台又切回时，setTimeout 链可能堆积或跳过多次——setInterval 虽也有节流（浏览器限制后台 tab 的定时器频率），但逻辑更干净、误差更可控。
实操建议：
- 间隔设为
1000毫秒，不要设成500或更小——毫秒级刷新毫无意义，反而增加 CPU 开销 - 首次渲染必须在定时器启动前完成，否则页面会“闪一下”才出现时间
- 用
new Date()每次取当前时间，别依赖上一次值累加——系统时间可能被手动调整或 NTP 同步修正
格式化时间字符串时，注意 getHours() 和 getUTCHours() 的区别
用户看到的“现在几点”，默认应是本地时区时间。getHours() 返回的是设备本地时区的小时数；而 getUTCHours() 返回的是 UTC 时间，直接用它会导致中国用户看到的时间比实际晚 8 小时。
常见错误现象：
代码写成 date.getUTCHours() + ':' + date.getUTCMinutes()，结果时钟永远显示 UTC 时间，和系统时间对不上。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 一律用
getHours()、getMinutes()、getSeconds() - 补零操作别手写
h ，改用 <code>String(h).padStart(2, '0')更稳（IE 不支持，但现代在线运行环境如 JSFiddle/CodePen/StackBlitz 都 OK） - 如果需显示年月日，用
getFullYear()、getMonth() + 1（注意getMonth()是 0～11）、getDate()
HTML 结构越简单越好，避免用 document.write 或内联样式污染
在线运行环境（比如 CodePen、JSFiddle、或者本地双击打开的 HTML 文件）对 DOM 操作很敏感。document.write 在页面加载完成后调用会清空整个文档，导致时钟一动就页面消失；内联样式（如 style="font-family: monospace"）虽然能用，但可维护性差，也容易被后续 JS 覆盖。
实操建议：
- 只用一个容器元素，比如
<div id="clock"></div>，所有时间内容往里textContent更新 - 样式用
<style>块写在<head>里，字体、大小、居中都配好，避免 JS 操控 style 属性 - 不要给容器设
contenteditable或绑定input事件——纯展示，不交互
上线前检查：时钟是否在页面隐藏时暂停？要不要恢复后自动校准？
大多数浏览器会对非活跃 tab 的 setInterval 进行节流（比如降到 1 分钟一次），所以切走再切回来，秒数可能跳变（比如从 12:34:56 直接跳到 12:35:02）。这不是 bug，是浏览器节能机制。
如果你需要“视觉上不跳”，就得在每次触发时重新读 new Date() 并计算差值，而不是依赖定时器节奏。但要注意：频繁读 Date 本身开销极小，真正影响性能的是 DOM 更新频率——所以校准逻辑可以保，但别每 100ms 刷一次 DOM。
实操建议：
- 保持每秒更新一次 DOM，这是人眼可接受的平滑底线
- 如果发现跳秒严重（比如 >3 秒），说明用户长时间切走了，这时可以加一句
if (diff > 2000) { clockEl.textContent = formatTime(new Date()); }强制重绘，但别做复杂插值动画 - 别尝试用
Page Visibility API做精细控制——在线运行场景下，多数用户就是打开看一眼，没必要过度优化
new Date()，后者才依赖定时器精度——而绝大多数需求，选前者就够了。 
