必须用JavaScript动态更新DOM：通过setInterval每秒调用new Date()获取当前时间，用toLocaleTimeString('zh-CN')或手动格式化后赋值给元素textContent，避免innerHTML覆盖或document.write清空页面，并提供服务端时间fallback。
直接用 new Date() 配合 setInterval 就能实现，但只写一次时间、不刷新，或用 document.write() 覆盖页面，是新手最常踩的两个坑。
为什么不能靠 HTML 自己显示系统时间？
HTML 是静态标记语言，没有运行时能力。<p>当前时间：2026-08-26</p> 这种写法加载完就定格了，不会随系统走。必须靠 JavaScript 每次调用 new Date() 重新取值，并主动更新 DOM。
常见错误包括：
- 只执行一次
new Date()，没加定时器 → 时间永远停在页面打开那一刻 - 把
document.write()写进脚本 → 整个页面被清空重写，只剩时间 - 用
innerHTML更新父容器（比如整个<div>）→ 可能误删子元素或事件监听器
如何正确用 setInterval 每秒更新？
核心是封装一个更新函数，用 setInterval 每 1000ms 调用一次。别用 setTimeout 递归，容易因 JS 执行延迟导致跳秒或堆积。
立即学习“前端免费学习笔记（深入）”；
推荐写法：
<div id="clock"></div>
<script>
const clockEl = document.getElementById('clock'); // 提前查一次，别放定时器里
function updateClock() {
const now = new Date();
clockEl.textContent = now.toLocaleTimeString('zh-CN', { hour12: false });
}
updateClock(); // 立即执行，避免首屏空白
setInterval(updateClock, 1000);
</script>
注意点：
-
textContent比innerText更可靠，不受 CSS 隐藏影响 - 缓存
clockEl引用，避免每次定时器都调用getElementById - 把
<script>放在</body>前，或包装在DOMContentLoaded里，确保 DOM 已就绪
要显示年月日时分秒，该用 toLocaleString() 还是手动拼接？
toLocaleString() 看似简单，但输出格式受浏览器、系统语言、区域设置影响大。比如 macOS 和 Windows 中文环境下，toLocaleString() 可能分别输出 “2026/8/26 上午11:30:45” 和 “2026年8月26日 上午11:30:45”，且不保证补零。
真要稳定输出 2026-08-26 11:30:45，建议手动拼接：
function formatTime(now) {
const y = now.getFullYear();
const m = String(now.getMonth() + 1).padStart(2, '0');
const d = String(now.getDate()).padStart(2, '0');
const H = String(now.getHours()).padStart(2, '0');
const M = String(now.getMinutes()).padStart(2, '0');
const S = String(now.getSeconds()).padStart(2, '0');
return `${y}-${m}-${d} ${H}:${M}:${S}`;
}
这样可控，兼容性好，也方便加星期、毫秒等字段。
移动端和后台标签页下时间会不准，怎么应对？
Android/iOS 在页面切到后台、键盘弹出、或系统省电时，会节流甚至暂停 setInterval，导致跳秒、卡顿。这不是代码 bug，而是浏览器策略。
缓解方法有限，但可做两件事：
- 不要依赖定时器“准时”触发——改用
requestAnimationFrame或每帧检查new Date()与上一次时间差，动态修正 - 如果对精度要求高（比如倒计时），得同步服务端时间，前端只做本地渲染，不用于逻辑判断
多数场景下，用户切走再切回来，看到时间“跳”了一下，其实是预期行为。强行绕过节流反而增加功耗和发热。
