必须用 setinterval 每秒调用 new date() 获取实时时间，避免外置声明导致时间冻结；用 textcontent 而非 innerhtml 更新纯文本；手动拼接时间字符串并 padstart 补零以确保格式稳定；脚本需确保 dom 就绪后再执行。
只执行一次 new Date() 就完事了
HTML 本身不会自动刷新时间，new Date() 只调用一次，得到的就是页面加载那一刻的时间，之后永远不变。常见写法是直接在 <script></script> 里写：document.getElementById('clock').textContent = new Date().toLocaleTimeString();，没包函数、没定时器——这等于把“快照”塞进页面，不是“时钟”。
必须配合周期性触发机制，最常用的是 setInterval()。别用 setTimeout() 递归调用，容易因 JS 主线程阻塞导致回调堆积或跳秒。
- ✅ 正确：用
setInterval(updateClock, 1000)，函数内每次重新调用new Date() - ❌ 错误：把
const now = new Date()写在定时器外，函数里只格式化这个固定值 - ⚠️ 注意：
setInterval的 1000ms 是“最小间隔”，不保证精确每秒执行；对精度要求高（如倒计时）得用时间戳校准
用 innerHTML 更新纯文本时间
如果只是显示“10:22:35”这种纯字符串，用 innerHTML 属于过度操作：它会触发 HTML 解析、重建子节点，有 XSS 风险（哪怕内容可控），还比 textContent 慢。
更糟的是，有些同学用 innerHTML = '<span>' + timeStr + '</span>' 包一层再塞进去，结果目标元素原本可能有其他子节点（比如图标、单位文字），全被清空重写了。
- ✅ 推荐：
clockEl.textContent = timeStr，安全、轻量、语义清晰 - ✅ 如果真要加标签（比如高亮秒数），先确保容器结构稳定，或用
innerHTML但严格转义输入 - ⚠️ 别混淆：
innerText受 CSS 影响（display: none的内容不计入），textContent更可靠
toLocaleTimeString() 格式不一致或报错
toLocaleTimeString('zh-CN') 看似省事，但实际踩坑不少：Safari 对部分选项支持差，Windows 和 macOS 下默认输出可能分别是 “10:22:35” 和 “上午10:22:35”，hour12: false 在旧版浏览器可能被忽略。
更隐蔽的问题是：如果用户系统语言设成英文，'zh-CN' 不生效，回退到默认英文格式；或者传入非法 locale 字符串（如 'zh' 而非 'zh-CN'），某些环境直接抛错中断脚本。
- ✅ 稳定方案：手动拼接 +
padStart(2, '0')，例如String(date.getHours()).padStart(2, '0') - ✅ 兜底写法：
date.toLocaleTimeString(navigator.language || 'en-US', { hour12: false }) - ⚠️ 别依赖
toString()或toUTCString()，前者格式混乱，后者强制 UTC 时区，和用户本地时间不符
DOM 元素未就绪就执行更新
脚本放在 里，或没加 defer，而 document.getElementById('clock') 却在 DOM 加载完成前就执行——结果拿到 null，后续赋值报错：Cannot set property 'textContent' of null，整个时间逻辑静默失效。
这个问题在简单示例里不明显，但一旦页面变大、资源加载慢，就高频出现。
- ✅ 把脚本放
前，或加defer属性 - ✅ 或包装进
DOMContentLoaded事件：document.addEventListener('DOMContentLoaded', () => { ... }) - ✅ 更稳妥：更新函数里先判断元素是否存在，不存在则 return，避免报错中断
div 真正变成可信赖的时钟。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
