真动态需 setInterval 每秒执行 new Date()→格式化→更新 DOM；用 textContent 安全替换，缓存元素引用，手动补零格式化，切后台时暂停定时器。
直接用 setInterval 每秒调用 new Date() 才算真动态
HTML 本身不能“动”，<p>当前时间：2026-08-26</p> 这种写死的内容加载完就定格了。必须靠 JavaScript 每次重新取系统时间并更新 DOM。只执行一次 new Date() 是常见错误——比如把格式化结果直接写进 HTML 或只在页面加载时跑一遍 JS，之后再也不会变。
核心动作就三步：获取时间 → 格式化 → 塞进元素。缺一不可，且必须循环做。
-
setInterval(updateClock, 1000)是最稳的选择；别用setTimeout递归，容易跳秒或堆积 - 更新函数里必须调用
new Date()，不能复用初始化时存的那个对象 - 目标元素建议用
id定位，比如<div id="clock"></div>，避免 DOM 查询开销
textContent 比 innerHTML 更安全，别碰 document.write
用 innerHTML = timeStr 看似方便，但一旦目标容器里还有其他 HTML（比如图标、span 标签），就会被整个清空。而 document.write 更危险——页面加载完成后调用会直接覆盖整页内容。
textContent 只替换文本内容，不解析 HTML，也不受 CSS 隐藏影响，比 innerText 更可靠。
立即学习“前端免费学习笔记（深入）”；
- 提前缓存元素引用：
const clockEl = document.getElementById('clock');，避免每次都在setInterval里重复查 DOM - 更新时统一用：
clockEl.textContent = timeStr; - 如果真要插 HTML（比如加个
<strong>包小时），才考虑innerHTML，但得确保内容可信
格式化别依赖 toLocaleTimeString() 默认行为
toLocaleTimeString('zh-CN') 能出 “10:38:45”，看起来省事，但实际输出受系统语言、浏览器版本、甚至用户时区设置干扰。比如 Safari 对 timeZoneName 支持差，Windows 和 macOS 下默认格式也可能不同。
要稳定输出 2026-08-26 10:38:45 这类格式，手动拼接更可控。
- 月份、日期、时、分、秒都可能是个位数，必须补零：
String(date.getDate()).padStart(2, '0') - 注意
getMonth()返回 0–11，要 +1；getFullYear()才是四位年份 - 示例片段：
`${year}-${month}-${day} ${hour}:${minute}:${second}`
页面切到后台时记得暂停 setInterval
用户切走标签页后，setInterval 仍可能继续运行（尤其 Chrome 新版对定时器做了节流，但不保证停）。既浪费资源，又可能导致恢复时时间跳变（比如休眠 5 分钟，回来瞬间从 10:38 跳到 10:43）。
监听 visibilitychange 事件是最轻量的解法。
- 用
document.hidden判断当前是否可见 - 不可见时调用
clearInterval(timerId)；可见时重新setInterval - 别忘了在页面卸载前清理定时器，防止内存泄漏
真正难的不是让时间动起来，而是让它在各种浏览器、各种用户操作路径下都“不跳、不卡、不崩”。补零、缓存元素、停后台定时器——这些细节漏一个，上线后就容易收到“时间不准”的反馈。
