必须用JavaScript定时更新DOM才能实现动态时钟，正确写法是setInterval(updateTime, 1000)，配合textContent、缓存元素引用、补零格式化及DOMContentLoaded监听。
直接写new Date()进HTML会永远不动
HTML本身是静态标记语言，<p>现在是：2026-08-26 11:44:00</p>这种写法加载完就定格了，不会随系统时间变化。必须靠JavaScript实时读取并更新DOM，否则“动态”只是假象。
setInterval漏写或写错参数会卡死或跳秒
常见错误是只调用一次updateTime()，没用setInterval包住；或者把间隔写成1000ms（带单位）——浏览器会当成NaN，定时器失效。正确写法是setInterval(updateTime, 1000)。
- 别用
setTimeout递归：容易因函数执行延迟导致跳秒、堆积甚至栈溢出 - 间隔设1000足够，高频更新（如100ms）无意义，还拖慢渲染
- 首次调用
updateTime()建议手动触发一次，避免页面刚加载时空白
用textContent而不是innerHTML或document.write
document.write已废弃，页面加载后调用会清空整个DOM；innerHTML = timeStr看似简单，但若目标元素里有子节点（比如图标、span），会被一并抹掉。稳妥做法是：document.getElementById('clock').textContent = timeStr。
-
textContent只改文本内容，不影响结构，也不解析HTML，防XSS又安全 - 别用
innerText：受CSS隐藏影响（比如display: none的父元素会让它返回空字符串） - 提前缓存元素引用，比如
const clockEl = document.getElementById('clock')，避免每次都在setInterval里重复查DOM
格式化时月份/日期/时分秒不补零会显示2026-8-26 9:4:5
getMonth()返回0~11，getDate()、getHours()等都可能返回个位数。直接拼接会导致8月变成8而非08，视觉上不统一，也影响对齐。
立即学习“前端免费学习笔记（深入）”；
- 必须用
.toString().padStart(2, '0')，例如：date.getDate().toString().padStart(2, '0') - 别依赖
toLocaleTimeString('zh-CN')输出“年月日”，它在不同系统/浏览器下格式不稳定（比如Safari可能缺“年”字，Windows和macOS默认分隔符不同） - 如果要显示星期几，
getDay()返回0~6，需手动映射为中文数组：['星期日', '星期一', ...]，不能靠toLocaleDateString自动翻译——部分旧浏览器不支持选项
<head>里但没监听DOMContentLoaded，可能查不到元素；用getHours()拿到的是本地时区时间，服务端时间校准、跨时区展示得另加逻辑。 
