动态显示时间必须用 javascript 每秒更新 dom，首选 setinterval(updateclock, 1000)；需每次调用 new date() 获取实时时间，缓存 dom 元素，首次手动触发函数，用 textcontent 而非 innerhtml，手动补零拼接格式，并确保脚本在 dom 加载后执行。
动态显示时间不能靠 HTML 自己完成，必须用 JavaScript 每秒读取并更新 DOM；否则写死的 <p>当前时间：2024-06-15</p> 永远不会变。
用 setInterval 每秒更新最稳妥
这是绝大多数场景的首选方案：节奏稳定、兼容性好、代码易懂。别用 setTimeout 递归，容易因 JS 执行延迟导致跳秒或多次叠加执行。
-
setInterval(updateClock, 1000)是核心，1000 毫秒即 1 秒，精度够用且避免高频重绘 - 函数内必须调用
new Date()获取实时对象，不能只在外部定义一次然后反复格式化 - 提前缓存 DOM 元素，比如
const clockEl = document.getElementById('clock')，避免每次都在setInterval里重复查找 - 首次调用建议手动触发一次（
updateClock()），防止页面加载慢时出现短暂空白
用 textContent 而不是 innerHTML
纯时间字符串不需要 HTML 解析，textContent 更快、更安全、不受 CSS 隐藏影响（innerText 会跳过 display: none 的元素）。
- 如果目标元素是
<div id="clock"></div>，就用clockEl.textContent = timeStr - 别用
innerHTML = timeStr，除非你明确需要插入带标签的内容——但时间不需要 - 更别用已废弃的
document.write()，它会清空整个页面
手动拼接格式比 toLocaleTimeString() 更可控
浏览器对 toLocaleTimeString('zh-CN', { hour12: false }) 的支持不一致，比如 Safari 在某些系统下可能忽略 hour12 或输出英文 AM/PM；要稳定输出 2026-08-27 06:59:12，手动拼接更可靠。
- 月份、日期、小时、分钟、秒都可能是个位数，必须补零：
String(date.getDate()).padStart(2, '0') - 注意
getMonth()返回 0–11，所以要 +1；getFullYear()才是完整年份 - 示例片段：
`${year}-${month}-${day} ${hours}:${minutes}:${seconds}` - 如果只要时分秒，直接取
getHours()等即可，无需构造完整日期对象
最容易被忽略的是执行时机：脚本若放在 且没加 defer，getElementById 会返回 null，报错 Cannot set property 'textContent' of null。把 <script></script> 放在 前，或者加 defer 属性，是最简单有效的解法。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
