新手实现时钟需先解决DOM未就绪、时间格式错乱、秒数跳变三问题：脚本放</body>前或用DOMContentLoaded监听；用textContent而非innerHTML更新；用requestAnimationFrame检测秒变再更新以避免跳秒。
直接用 Date + setInterval 就能跑起来，但新手常卡在 DOM 未就绪、时间格式错乱、秒数跳变这三处——先解决它们，再谈美化。
确保页面加载完再执行时间脚本
脚本放在 <head> 里却去操作还没生成的 <div id="clock">，结果是控制台报 Cannot set property 'textContent' of null。
- 最稳妥的做法：把
<script>放在</body>前面，DOM 已自然构建完成 - 或者用
DOMContentLoaded包一层：document.addEventListener('DOMContentLoaded', () => {<br> const clock = document.getElementById('clock');<br> if (clock) updateTime();<br>}); - 别用
window.onload——它等所有资源（图片、CSS）加载完才触发，延迟明显
用 textContent 而不是 innerHTML 更新时间
时间字符串不含 HTML 标签，用 innerHTML 不仅多余，还可能被误解析（比如时间里有 < 符号时），且性能略低。
- 正确写法：
clock.textContent = formattedTime; - 错误写法：
clock.innerHTML = formattedTime;（除非你真要插入<span>等标签） - 如果后续要加 AM/PM 高亮，再拆成
span元素分别赋值，不要靠innerHTML拼接
避免每毫秒都重绘，只在秒变化时更新
setInterval(updateTime, 1000) 看似合理，但若函数执行耗时或主线程卡顿，会导致“跳秒”或两次更新间隔远超 1 秒。
立即学习“前端免费学习笔记（深入）”；
- 更稳的做法：用
requestAnimationFrame驱动，只在浏览器准备重绘前检查秒数是否变了function timeLoop() {<br> const now = new Date();<br> if (now.getSeconds() !== lastSecond) {<br> clock.textContent = formatTime(now);<br> lastSecond = now.getSeconds();<br> }<br> requestAnimationFrame(timeLoop);<br>}<br>let lastSecond = -1;<br>requestAnimationFrame(timeLoop); - 注意：首次调用
requestAnimationFrame必须在 DOM 就绪后，否则clock可能为null - 对普通页眉时钟，
setInterval够用；但做仪表盘或全屏时钟，这个细节会影响观感
真正容易被忽略的是时区——Date 默认用用户本地时区，如果网页面向全球用户，又没注明“显示本地时间”，访客会困惑。需要显式标注或切换时区时，就得用 Intl.DateTimeFormat 或第三方库，纯前端处理 UTC 偏移并不直观。
