应使用 setInterval 每秒调用 new Date() 获取当前时间，并用中文星期数组或 toLocaleDateString('zh-CN') 生成带“周X”的实时时间字符串，避免累加时间、漏更新星期或 DOM 频繁查询。
用 setInterval + Date 获取带星期的实时时间
浏览器里没法“自动刷新”时间，必须靠 JavaScript 主动轮询更新。核心是每秒调用一次 setInterval，在回调里构造含星期的字符串——Date 对象本身不直接返回中文星期，得靠数组映射或 toLocaleDateString 配置。
常见错误是只更新时分秒，漏掉星期；或者用 getDay() 返回 0–6 后没对应到“周日”“周一”，导致显示成数字或错位。
-
new Date().getDay()返回的是 0（周日）到 6（周六），不是 1–7，别直接加 1 当“周一” - 中文星期建议用固定数组：
['周日', '周一', '周二', '周三', '周四', '周五', '周六']，比依赖系统 locale 更可控 - 避免在
setInterval里反复查 DOM 元素（如document.getElementById），应提前缓存引用
用 toLocaleDateString 一行生成本地化带星期时间
如果只要显示、不需精确控制格式（比如不要“2024年10月25日 周五 14:30:22”里的“年月日”部分），toLocaleDateString 是最简方案。它能按当前系统语言输出星期，且可选选项精细控制。
注意：不同浏览器对 weekday: 'long' 的渲染一致，但若页面强制设了 lang="en" 或用户系统语言非中文，可能出英文星期。生产环境建议显式指定 locale。
立即学习“前端免费学习笔记（深入）”；
- 推荐写法：
new Date().toLocaleDateString('zh-CN', { weekday: 'long', year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit' }) - 月份/日期补零用
month: '2-digit'，不用自己拼接padStart(2, '0') - 该方法返回字符串，不能直接用于计算，仅适合展示
避免 setTimeout 递归导致的时间漂移
有人用 setTimeout 递归代替 setInterval，以为更“精准”。但实际每次执行+解析+渲染都有延迟，几秒后就会比真实时间慢几百毫秒。尤其页面切到后台时，浏览器会节流定时器，再切回来就明显不同步。
正确做法是每次更新时都重新取 new Date()，而不是基于上一次时间累加。哪怕 setInterval 被节流，只要一恢复，立刻读当前时间，就能拉回准确值。
- ❌ 错误：用
lastTime += 1000推算下一次时间 - ✅ 正确：每次回调第一行就是
const now = new Date(); - 如果对精度要求极高（比如倒计时），可考虑用
performance.now()做差值补偿，但普通时间显示完全没必要
把时间塞进 HTML 的几种常见写法及坑点
最常犯的错是直接改 innerHTML，触发整段重排；或者用 innerText 但没处理换行/空格；还有人用 textContent 却忘了它不解析 HTML 标签——其实纯文本时间根本不需要 HTML 标签。
另一个隐形坑是服务端渲染（SSR）或静态 HTML 里预置了初始时间，JS 加载前用户看到的是旧时间，且可能闪屏。应确保 JS 尽早执行，或服务端不预渲染时间区域。
- 推荐用
textContent更新纯文本内容，性能最好，无 XSS 风险 - 若需高亮星期（比如红色），用
innerHTML+ 小范围 span，例如：el.innerHTML = `...<span class="week">${week}</span>...` - 别给时间容器设
id="time"还同时用多个脚本去操作它，容易冲突
真正麻烦的从来不是“怎么显示”，而是“什么时候开始显示”和“页面不可见时怎么保真”。标签页切走再切回，setInterval 可能被暂停数秒，这时候靠 new Date() 重读是唯一靠谱的兜底方式。其他所有优化，都建立在这个前提之上。
