三步实现纯前端动态时钟：html中用id="clock"的元素作容器；js中每秒调用new date()并用tolocaletimestring()格式化，通过textcontent写入；script须置于前或监听domcontentloaded事件。
直接用 Date 对象 + setInterval 就能跑起来，不需要框架、不依赖服务器，三步搞定。
HTML里先放个“时间容器”
必须给时间留一个有 id 的元素，浏览器才能找到它并写入内容。别用 class 或没 id 的标签，否则 document.getElementById() 会返回 null，后续全报错。
推荐写法：
<div id="clock">加载中...</div>
注意：id="clock" 是硬性要求，后面 JS 会严格按这个字符串查找；加载中... 是友好占位，避免白屏空等。
JS 里用 new Date() 拿时间，别直接拼字符串
新手常犯的错是手动写 "2026-08-26 14:30:00" 这种死值——它永远不变。真动态得每秒重新调用 new Date()。
基础可运行示例：
function updateClock() {
const now = new Date();
const timeStr = now.toLocaleTimeString("zh-CN", { hour12: false });
document.getElementById("clock").textContent = timeStr;
}
setInterval(updateClock, 1000);
updateClock(); // 立即执行一次，避免首次显示“加载中...”太久
关键点：
-
toLocaleTimeString()自动适配本地格式（比如中文系统输出“14:30:00”，不用自己补零） - 加
{ hour12: false }强制 24 小时制，避免出现 “2:30:00 PM” 这类需要额外判断的格式 - 末尾手动调一次
updateClock()，确保页面一打开就显示时间，而不是等 1 秒后才刷出
别把 innerHTML 当默认选项
如果只是纯数字时间（如 “14:30:00”），一律用 textContent，不是 innerHTML。
原因很实际：
-
textContent更快：不触发 HTML 解析，DOM 更新开销小 -
textContent更安全：哪怕时间字符串意外混入<script></script>，也不会执行 - 只有当你需要插入带样式的 HTML（比如
<span class="sec">00</span>）才考虑innerHTML，但那是进阶需求
所以这行是推荐写法：document.getElementById("clock").textContent = timeStr;
常见失败原因：脚本位置不对
把 <script></script> 放在 里，99% 会报错 Cannot set property 'textContent' of null —— 因为此时 <div id="clock"> 还没被浏览器读到。<p>解决方法只有两个可靠选择：</p>
<ul>
<li>把 <code><script></script> 标签放到 前面（最简单）
document.addEventListener("DOMContentLoaded", () => { /* 你的代码 */ });
别信“加 defer 就万事大吉”，defer 只保证顺序，不保证 DOM 已就绪；新手直接放
