直接用 Date + setInterval 实现时钟需确保 DOM 就绪后再操作，用 textContent 更新时间，注意 getMonth() 返回 0–11 需加 1 并补零，监听 visibilitychange 节省资源。
直接用 Date + setInterval 就能跑起来，不需要框架、不依赖外部库，5行 JS 就够 —— 但写错地方或忽略 DOM 加载时机，页面就永远不显示时间。
确保 DOM 元素存在后再执行 JS
常见错误是脚本在 <div id="clock"></div> 还没解析到页面时就执行了 document.getElementById('clock')，结果返回 null，后续赋值报错且无提示。
- 把
<script>放在</body>前面是最简单可靠的方案 - 或者用
DOMContentLoaded包裹逻辑：document.addEventListener('DOMContentLoaded', () => { const el = document.getElementById('clock'); if (el) updateTime(); }); - 别在
<head>里直接写未包裹的 DOM 操作代码
用 textContent 而不是 innerHTML 更新时间
时间字符串不含 HTML 标签，用 innerHTML 不仅多一次 HTML 解析开销，还可能意外触发 XSS（比如时间被污染为 <img src=x onerror=alert(1)>）。
- 正确写法：
el.textContent = formattedTime - 错误写法：
el.innerHTML = formattedTime（除非你明确要渲染 HTML） - 性能上，
textContent更新更快，浏览器不用构建 DOM 子树
格式化时注意 getMonth() 返回 0–11
new Date().getMonth() 返回的是从 0 开始的月份（0 表示一月），直接拼接会导致“2026-13-26”这类错误。
立即学习“前端免费学习笔记（深入）”；
- 补零并加 1：
String(date.getMonth() + 1).padStart(2, '0') - 星期同理：
date.getDay()返回 0（周日）到 6（周六），需映射为中文或英文名称 - 避免手写
if (month === 0) return '一月'，用数组查表更简洁：['周日','周一','周二','周三','周四','周五','周六'][date.getDay()]
别让定时器在页面隐藏时继续跑
用户切到其他标签页后，setInterval 仍每秒执行，浪费 CPU、影响电池，还可能导致时间跳变（尤其在低功耗模式下）。
- 监听
visibilitychange事件：document.addEventListener('visibilitychange', () => { if (document.hidden) clearInterval(timerId); else timerId = setInterval(updateTime, 1000); }); - 首次启动前先调用一次
updateTime()，避免刚切回页面时显示旧时间 - 如果用
requestAnimationFrame，它本身会自动暂停不可见时，但需额外判断秒数是否变化，否则帧率高但更新冗余
最简可用版本只有三件事：等 DOM 就绪、获取并格式化 Date、用 textContent 写入；其余都是防止它在真实环境里掉链子的必要补丁。
