最简单有效的方式是用 setInterval 每秒调用 new Date() 获取实时时间并更新 DOM；必须将 Date 实例创建放在回调内，避免只执行一次；推荐使用 toLocaleDateString/toLocaleTimeString 快速格式化，需注意时区与格式可控性；务必清理定时器防内存泄漏；客户端时间不可信，强一致性场景须依赖服务端时间戳。
用 setInterval 配合 new Date() 实时更新时间
直接改 DOM 文本是最简单有效的方式，不需要框架或额外库。核心是每秒调用一次函数，生成当前格式化时间字符串并写入元素。
常见错误是只执行一次 new Date()，导致显示的是页面加载那一刻的时间，不会动。必须把创建 Date 实例放在定时器回调里。
- 用
document.getElementById或querySelector拿到要显示时间的元素（比如<span id="clock"></span>） - 在
setInterval回调中调用new Date()，再用getFullYear、getMonth等方法取值（注意：月份从 0 开始，要 +1） - 拼接字符串时手动补零，比如
String(date.getDate()).padStart(2, '0')，避免出现 “2024-5-8 9:5:3” 这种格式 - 推荐设为
1000毫秒间隔；设更短（如 100ms）没实际意义，还增加 CPU 负担
toLocaleTimeString 和 toLocaleDateString 快速格式化
如果对格式要求不严格，比如只要“中文本地习惯”的年月日和时分秒，这两个方法比手拼更省事，也自动适配用户系统语言和地区设置。
但要注意：它们返回的字符串格式不可控（比如有的系统把“上午/下午”带上，有的不带），且不能单独提取某一部分（如只要小时和分钟）。需要精确控制时，还是得用 getHours() 等方法。
立即学习“前端免费学习笔记（深入）”；
-
new Date().toLocaleDateString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit' })→ "2024-05-08" -
new Date().toLocaleTimeString('zh-CN', { hour12: false, hour: '2-digit', minute: '2-digit', second: '2-digit' })→ "14:23:05" - 两个结果拼起来就是完整时间，但要注意时区——默认用浏览器本地时区，不是服务端时间
避免 setTimeout 递归调用或漏掉 clearInterval
有人用 setTimeout 递归代替 setInterval，逻辑上可行，但容易因异步延迟累积造成跳秒（比如某次渲染卡了 1200ms，下一次就晚了 200ms）。而 setInterval 是固定节奏触发，更稳。
另一个坑是页面切换或组件卸载后没清理定时器，导致内存泄漏或报错（比如目标元素已不存在，还往里面写内容）。
- 把
setInterval的返回值存成变量，比如const timer = setInterval(...) - 在页面隐藏（
visibilitychange事件）、组件销毁（React 的useEffect清理函数）、或用户离开前，调用clearInterval(timer) - 写入 DOM 前加一层判断：
if (el) el.textContent = timeStr，防止元素被移除后报错
服务端时间不准？别靠 JS 客户端硬同步
纯前端方案依赖用户设备时间，如果对方电脑时间错了，显示出来就是错的。这不是代码问题，是信任边界问题。
真有强一致性要求（比如倒计时、订单超时），必须由后端提供标准时间戳，前端只负责轮询或用 WebSocket 接收更新，再基于这个基准做偏移计算。JS 里的 Date 只能当“本地时钟”，不能当“权威时间源”。
顺带一提：不要用 new Date().getTimezoneOffset() 手动纠服务器时区——时区规则复杂，浏览器已有完整实现，优先用 Intl.DateTimeFormat 或带 timeZone 选项的 toLocaleString。
