用 setinterval 每秒调用 new date().tolocaletimestring() 更新 id="clock" 元素的 textcontent，首次加载即渲染，页面卸载前需 clearinterval 清理定时器。
用 setInterval 配合 new Date() 更新时间显示最直接
页面上显示“当前时间”并每秒刷新，核心就是定时重取系统时间、格式化、写入 DOM。不依赖任何库，原生 JS 就够用。
关键点在于：不能只调用一次 new Date()，必须持续触发；更新频率设为 1000ms（1秒），太短浪费资源，太长（比如 5000ms）会导致明显延迟。
- 把时间容器元素设一个明确的
id，比如id="clock"，方便document.getElementById快速定位 - 时间格式建议用
toLocaleTimeString()，它会按用户本地时区和习惯（12/24 小时制）自动适配，比手动拼接getHours()+getMinutes()更鲁棒 - 首次加载时就渲染一次，避免页面打开后空白半秒才出现时间
textContent 比 innerHTML 更安全、更高效
时间字符串不含 HTML 标签，纯文本。用 textContent 写入既防止 XSS（万一未来时间源被污染），又避免浏览器重复解析 HTML 结构，性能略优。
常见错误是写成 element.innerHTML = timeStr —— 没必要，还多一层解析开销。
- 如果容器里原本有其他 HTML（比如图标或 span），而你只想替换文字部分，请确保目标节点是纯文本容器，或用
innerText（注意兼容性） - 在严格 CSP 策略下，
innerHTML可能被拦截，textContent几乎无限制
页面卸载时记得清除 setInterval
用户切换标签页、关闭窗口或导航离开时，若未清理定时器，它仍会在后台运行（尤其在旧版 Safari 或某些 Android WebView 中），造成内存泄漏或意外触发。
现代浏览器大多做了优化，但显式清理仍是可靠做法。
- 用
let timerId = setInterval(...)保存句柄 - 监听
beforeunload或visibilitychange事件，在页面隐藏或即将关闭时调用clearInterval(timerId) - 如果只是简单小页面且生命周期短，不清理影响不大；但嵌入到 SPA 或长期驻留的管理后台中，这步不能省
时区与夏令时：别硬编码 UTC 偏移
用户看到的时间，应反映其本地系统设置。直接用 new Date().toUTCString() 或手动加减小时数，会忽略夏令时切换、地区规则变更等细节。
浏览器 Date 对象本身已内置 IANA 时区数据库（通过 OS 同步），只要用本地方法，就能自动应对。
- ✅ 推荐：
new Date().toLocaleTimeString('zh-CN')或不传 locale，默认用浏览器语言+时区 - ❌ 避免：
new Date().getHours() + 8这类魔数偏移——中国标准时间（CST）不是永远 UTC+8（比如新疆部分地区实际用 UTC+6） - 如需固定显示某一时区（如服务器时间），用
Intl.DateTimeFormat显式指定timeZone选项，而不是靠客户端系统
真正容易被忽略的是：时间显示逻辑一旦嵌入复杂组件（比如 Vue 的响应式模板或 React 的 useEffect），容易因组件销毁时机不清导致定时器残留。这时候，比起手写 setInterval，用框架自带的生命周期钩子托管更稳妥。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
