用 setinterval 实现页面实时时间显示最直接，需缓存 dom、复用 intl.datetimeformat 实例、用 textcontent 赋值，并在页面卸载前 clearinterval 防泄漏。
用 setInterval 更新页面时间最直接
浏览器里实时显示当前时间，核心就是定时重绘——setInterval 是最轻量、兼容性最好的选择。它不依赖框架，不触发重排开销，100% 原生支持所有现代浏览器（包括 IE9+）。
常见错误是把 new Date() 写在定时器外，导致只取到初始时间；或者用 setTimeout 递归但没清理，造成内存泄漏。
- 时间格式化建议用
.toLocaleTimeString()，自动适配用户本地时区和格式（如 “下午 2:38:15” 或 “14:38:15”） - 若需固定格式（如 24 小时制、补零），避免手拼字符串，改用
Intl.DateTimeFormat，更健壮 - 别在
setInterval里反复调用document.getElementById，先缓存 DOM 引用
Intl.DateTimeFormat 控制小时/秒/时区不翻车
直接拼 date.getHours() + ':' + date.getMinutes() 看似简单，但缺前导零（9:5 → 09:05）、没处理 AM/PM、无法切换 UTC 或东八区——这些都容易在上线后被用户反馈。
Intl.DateTimeFormat 是标准方案，参数清晰，输出稳定：
const formatter = new Intl.DateTimeFormat('zh-CN', {
hour12: false,
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
timeZone: 'Asia/Shanghai'
});
// 输出：'14:38:15'
-
timeZone必须显式指定，否则默认用用户本地时区，服务器时间和前端显示可能不一致 - 不用
en-US等 locale 强制格式，zh-CN能保“点”“分”“秒”汉字单位（如需纯数字则去掉hourCycle: 'h23'） - 不要在每次定时回调里新建
Intl.DateTimeFormat实例，初始化一次复用即可
把时间塞进 span 里比 innerHTML 更安全
很多人习惯用 document.getElementById('clock').innerHTML = timeStr，但万一 timeStr 含特殊字符（比如从接口动态拼接时混入 ），会意外解析成标签，引发 XSS 风险或 DOM 错乱。
- 一律用
textContent替代innerHTML，纯文本写入，零解析、零风险 - 目标元素推荐用
<span id="live-time"></span>，语义明确，不影响布局流 - 如果页面有多个时间显示点（如页脚+侧边栏），给每个加唯一
id，别用 class +querySelectorAll循环更新——性能差且易漏
页面卸载前记得 clearInterval
单页应用（SPA）或频繁切换路由时，如果没清理定时器，setInterval 会持续执行，占用 CPU，还可能往已销毁的 DOM 写内容，报错 Cannot set property 'textContent' of null。
最稳妥的做法是在离开页面前清除句柄：
let timerId;
function startClock() {
timerId = setInterval(() => {
const now = new Date();
document.getElementById('live-time').textContent = formatter.format(now);
}, 1000);
}
// 页面隐藏或卸载时清理
window.addEventListener('beforeunload', () => clearInterval(timerId));
// 或用 Page Visibility API 监听切换（更精细）
document.addEventListener('visibilitychange', () => {
if (document.hidden) clearInterval(timerId);
else startClock();
});
实际项目中，这个清理步骤常被跳过，直到监控发现内存缓慢增长或控制台持续报错才回头补。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
