最稳妥做法是用 setInterval 每秒调用 updateClock 更新 textContent，配合 Intl.DateTimeFormat 格式化时间，并监听 visibilitychange 事件处理页面可见性变化以避免跳秒。
用 setInterval 更新 innerHTML 最直接
页面上显示动态当前时间，核心就一条：定时读取 new Date()，再塞进某个元素。最稳妥的做法是用 setInterval 每秒更新一次 innerText 或 textContent。
常见错误是只调用一次 Date，结果时间卡在页面加载那一刻；或者用 setTimeout 递归但没存返回值，导致无法清除，内存泄漏风险。
- 用
textContent而非innerHTML，避免 XSS 风险（除非你明确要渲染 HTML） - 别在循环里反复创建
Date实例再格式化——性能不差，但可读性差；建议封装成函数 - 注意时区：
toLocaleTimeString()默认用本地时区，toUTCString()返回 UTC，别混用
const clock = document.getElementById('clock');
function updateClock() {
clock.textContent = new Date().toLocaleTimeString();
}
updateClock(); // 先显示一次，避免空白
setInterval(updateClock, 1000);
用 Intl.DateTimeFormat 控制格式更可靠
直接拼字符串或用 getHours() 等方法容易出错：比如小时没补零、AM/PM 切换混乱、中文系统下星期名乱码。现代做法是交给 Intl.DateTimeFormat，它按用户语言环境自动处理。
使用场景包括多语言站点、需要固定格式（如 “14:05:22”）、或兼容老浏览器（IE11+ 支持）。
立即学习“前端免费学习笔记（深入）”；
-
hour12: false强制 24 小时制，比手动判断getHours()是否 > 12 更干净 - 传空对象
{}会走默认格式，但不同浏览器可能不一致；显式声明hour、minute、second更可控 - 如果页面语言切换了（比如用户点了个语言按钮），记得重新构造
Intl.DateTimeFormat实例
const formatter = new Intl.DateTimeFormat('zh-CN', {
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
hour12: false
});
function updateClock() {
clock.textContent = formatter.format(new Date());
}
用 CSS @property + animation 不可行
有人想“纯 CSS 实现动态时间”，比如用 @property 定义自定义属性再配合 animation。这条路走不通：CSS 无法读取运行时 JavaScript 的 Date 值，@property 只支持初始值或 transition 中的插值，不能每秒触发重算。
错误现象包括时间不动、报 Invalid property name、或动画跑飞（因为 CSS 根本不知道 JS 里的时间变化）。
- 所有“实时”时间展示必须有 JS 参与，哪怕只是最小限度地更新一个 class 名或 data 属性
- 试图用
counter-increment模拟秒表？精度差、不可靠，且无法对齐真实时间 - 服务端渲染（SSR）页面要注意：首次 HTML 里的时间是静态的，JS 加载后才开始动，得留好占位符
移动端 visibilitychange 事件要处理
用户切到其他 App 或锁屏后，setInterval 在部分 Android 浏览器或 iOS Safari 里可能暂停或降频，导致时间跳秒甚至卡住。不能假设它永远每秒执行一次。
解决思路不是“让它不停”，而是“感知状态变化后主动同步”。监听 visibilitychange 是最轻量的方式。
- 页面不可见时，可以暂停
setInterval（用clearInterval），恢复时重新启动并立即更新一次，避免跳过整秒 - 别依赖
pagehide：iOS Safari 在后台可能直接冻结页面，pagehide不一定触发 - 如果对精度要求极高（比如倒计时），应改用
performance.now()记录起始时间，每次重绘时计算偏移量，而非单纯依赖 setInterval
