最直接方式是用 setInterval 每1000毫秒调用一次函数，每次新建 Date 实例并用 padStart 补零格式化，通过 textContent 更新 DOM，避免缓存日期、跳秒、XSS 和缺零问题。
用 setInterval 配合 new Date() 实现秒级更新
页面上每秒刷新一次时间，最直接的方式就是用 setInterval 定期调用一个格式化并写入 DOM 的函数。注意别用 setTimeout 递归——容易因执行延迟导致跳秒或堆叠定时器。
-
setInterval的回调里必须每次重新调用new Date()，缓存Date实例会导致时间永远停在初始值 - 推荐间隔设为
1000（毫秒），不要用999或1001——既没实际收益，还可能干扰浏览器节流逻辑 - 写入 DOM 时优先用
textContent而非innerHTML，避免潜在 XSS 和重排开销
格式化时间字符串时小心 getHours() 和 getMinutes() 的返回值类型
getHours()、getMinutes()、getSeconds() 返回的都是数字，不是字符串。直接拼接会导致 “9:5:3” 这种缺零格式，用户一眼就能看出不专业。
- 用
String.prototype.padStart(2, '0')补零最稳妥，比如date.getHours().toString().padStart(2, '0') - 避免手写三元判断：
h 在负数或 <code>undefined时容易出错 - 如果项目已引入
Intl.DateTimeFormat，可用它处理时区和本地化，但注意 Safari 旧版本对timeZoneName: 'short'支持不一致
页面卸载前记得清除 setInterval，否则内存泄漏
在单页应用（SPA）中，如果组件销毁但定时器没清理，setInterval 会持续运行，持有 DOM 引用和闭包变量，造成内存无法释放。
- 把
setInterval返回的 ID 存到变量里，比如const timerId = setInterval(...) - 在组件卸载或页面离开前调用
clearInterval(timerId)；纯 HTML 页面可监听beforeunload，但注意该事件在现代浏览器中限制较多 - Vue/React 用户更应关注生命周期钩子（如
onUnmounted、useEffect清理函数），而不是依赖全局事件
需要高精度或跨时区显示？别只靠客户端 Date
用户设备系统时间可能不准，时区设置也可能被手动改过。单纯依赖 new Date() 显示“北京时间”或“服务器当前时间”，结果可能和真实业务时间差几分钟甚至几小时。
立即学习“Java免费学习笔记（深入）”；
- 若需对齐服务器时间，得先通过 API 获取服务端时间戳（如
/api/time返回 Unix 时间戳），再用它初始化一个偏移量校准的本地计时器 -
Date对象本身不保存时区信息，toLocaleTimeString('zh-CN', { timeZone: 'Asia/Shanghai' })是运行时计算，仍基于用户本地时钟——只是做了时区换算 - 真要显示“UTC+8 固定时间”，建议后端提供带时区的时间字符串（如
"2024-06-15T14:30:00+08:00"），前端用new Date()解析后格式化，比硬编码偏移更可靠
