用 setinterval 每秒更新 span 文本显示本地时间，需缓存元素、检查存在性、用 textcontent 而非 innerhtml，dom 就绪后启动并监听 beforeunload 清理定时器。
用 setInterval 更新 <span></span> 内容是最直接方式
浏览器里动态显示当前时间，核心就是「定时读取系统时间 + 替换 DOM 文本」。不需要框架，原生 JS 三行就能跑起来。关键不是“怎么写”，而是“别在 document.write 或内联 onclick 里塞逻辑”——那会阻塞渲染或绑定失败。
常见错误是把 new Date() 写死在函数外，结果只初始化一次；或者用 setTimeout 递归但没存返回值，导致无法清除。
- 时间格式建议用
toLocaleTimeString()，自动适配用户本地时区和格式（如 “下午 2:30:45”） - 若需固定格式（如
HH:mm:ss），用getHours()/getMinutes()/getSeconds()拼接，注意补零：String(date.getSeconds()).padStart(2, '0') -
setInterval的间隔设为1000（毫秒），别用0或1——既不省电，也不更准，还可能被节流
textContent 比 innerHTML 更安全、更快
动态更新时间文本，本质只是改纯文本内容。用 innerHTML 会触发 HTML 解析，哪怕你只传字符串 "14:30:22"，浏览器也要走一遍解析流程；而 textContent 直接设为文本节点值，无副作用，且避免 XSS 风险（比如时间变量万一被污染成 "<script>alert(1)</script>"）。
实操中常有人写 document.getElementById('clock').innerHTML = now，看似能用，但一旦未来时间源不可控（比如从 URL 参数或用户输入读取），就埋了坑。
- 务必给目标元素加
id，例如<span id="clock"></span>，别依赖 class 或标签名遍历 - 更新前先检查元素是否存在：
if (el) el.textContent = now，防止脚本执行早于 DOM 加载时报错Cannot set property 'textContent' of null - 不要在循环里反复调用
document.getElementById，提取到变量缓存
页面加载完成后再启动定时器，避免 getElementById 找不到元素
脚本放在 里却直接执行，是新手最常踩的坑。此时 DOM 还没解析，document.getElementById('clock') 必然返回 null，后续所有操作都失效。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
不用等整个页面资源（图片、CSS）加载完，只需确保 DOM 树就绪。有三个可靠选择：
- 把
<script></script>放在前，这是最轻量、兼容性最好的做法 - 监听
DOMContentLoaded事件，适合脚本必须放的场景 - 用
async或defer属性加载外部脚本，但要注意async不保证执行顺序，defer更稳妥
别用 window.onload——它等所有资源加载完才触发，用户可能等 2 秒才看到时间开始跳动。
记得清理定时器，否则页面关闭后仍可能占用资源
虽然现代浏览器对未清理的 setInterval 处理得越来越智能，但显式清除仍是负责任的做法，尤其当页面含多个动态模块时。不清理的典型后果是：用户切到其他 tab 后，该定时器仍在后台运行（部分浏览器会降频，但非全部）；SPA 路由切换后旧定时器残留，造成内存泄漏或时间错乱。
清理动作本身很简单，关键是时机：在页面卸载前执行。最稳的方式是监听 beforeunload 事件（注意不是 unload，后者在某些浏览器中不可靠）。
- 定义定时器时保存 ID：
const timerId = setInterval(...) - 在
beforeunload回调里调用clearInterval(timerId) - 如果用的是模块化环境（如 ES Module），还需考虑组件销毁生命周期，不能只依赖全局事件
真正容易被忽略的点是：很多人写了清理逻辑，却忘了把它和定时器声明放在同一作用域——比如定时器在 IIFE 里，清理逻辑在全局，根本访问不到 timerId 变量。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
