最稳定兼容的做法是用 setInterval 每秒调用 new Date() 并更新 DOM 的 textContent；HTML 静态无法自动更新时间，必须 JS 持续读取写入；需缓存元素、手动格式化、避免 toLocaleTimeString 兼容性问题。
直接用 setInterval 每秒调用 new Date() 并更新 DOM 元素的 textContent，是目前最稳定、兼容性最好、也最容易调试的做法。其他方案（比如 requestAnimationFrame）在多数场景下反而增加复杂度，且不解决核心问题。
为什么不能只写一次 new Date()？
HTML 是静态标记语言，<p>现在是：2026-08-26</p> 这类写死的内容永远不会变。时间要“动”，必须靠 JS 持续读取并写回页面。常见错误包括：
- 脚本放在
<head>里但没等 DOM 加载完就执行，getElementById返回null - 只调用一次
updateClock()，没用定时器包裹 - 用
document.write()—— 会清空整个页面，已废弃
用 textContent 而不是 innerHTML
除非你要渲染带标签的时间（比如把“秒”加粗），否则一律用 textContent。它更快、更安全，也不受 CSS 隐藏规则干扰（innerText 会跳过 display: none 的内容）。示例：
const clockEl = document.getElementById('clock');
function updateClock() {
const now = new Date();
const h = String(now.getHours()).padStart(2, '0');
const m = String(now.getMinutes()).padStart(2, '0');
const s = String(now.getSeconds()).padStart(2, '0');
clockEl.textContent = `${h}:${m}:${s}`;
}
setInterval(updateClock, 1000);
注意：别在 setInterval 回调里反复查 DOM，提前缓存 clockEl 更高效。
立即学习“前端免费学习笔记（深入）”；
toLocaleTimeString('zh-CN') 看似省事，但有坑
它在中文系统下输出 “19:55:05”，但 macOS 和 Windows 对选项支持不一致；Safari 不支持 timeZoneName: 'short'，部分安卓 WebView 会忽略 hour12: false。如果你需要严格统一格式（比如始终显示 24 小时制 + 补零），手动拼接 + padStart(2, '0') 是唯一可靠方式。年月日同理：getMonth() 返回 0–11，必须 +1；getDate() 不补零会导致 “2026-8-26”。
真正容易被忽略的点是：时间精度和 DOM 更新节奏并不完全同步。即使设成 1000，JS 执行延迟、重排重绘开销都可能导致某次更新晚于整秒。如果项目对秒级一致性有强要求（比如倒计时），得结合 performance.now() 或服务端时间做校准，而不是盲目相信 setInterval 的间隔。
