怎么在HTML中动态显示时间？实用网页代码分享-html教程-PHP中文网

javascript用setinterval每秒调用new date()更新dom可实现实时时钟，需注意时区（本地时间非服务器时间）、格式化（推荐tolocaletimestring或手动padstart补零）和更新频率（1000ms最稳妥），并优先使用textcontent而非innerhtml。

怎么在html中动态显示时间？实用网页代码分享

直接用 JavaScript 的 setInterval 配合 new Date() 就能实时更新，但要注意时区、格式化和 DOM 更新频率这三个关键点。

用 `setInterval` 每秒刷新一次显示

这是最常见也最稳妥的做法。不能用一次性 setTimeout 或只执行一次的脚本，否则时间不会动。

推荐间隔设为 1000 毫秒（1 秒），太短（如 100）会白耗 CPU，且人眼根本看不出区别
务必在回调函数里重新调用 new Date()，否则拿到的是页面加载那一刻的时间
更新 DOM 时优先用 textContent 而不是 innerHTML，避免意外 HTML 解析或 XSS 风险

<div id="clock"></div>
<script>
  function updateClock() {
    const now = new Date();
    document.getElementById('clock').textContent = now.toLocaleTimeString();
  }
  setInterval(updateClock, 1000);
  updateClock(); // 立即显示，不等第一秒
</script>

显示本地时间还是服务器时间？

new Date() 拿到的是用户浏览器本地系统时间，不是你服务器所在时区的时间。这点经常被忽略，导致“明明后端是 UTC+8，页面却显示 UTC+0”。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

如果需要统一时间（比如直播倒计时、订单截止），必须由后端返回一个标准时间戳（如 1717023600000），前端再用它初始化 new Date(timestamp)
不要试图用 Date.prototype.getTimezoneOffset() 手动纠偏——用户可能开了系统自动时区，也可能改过时区设置，不可靠
若需显示多时区，用 toLocaleTimeString('ja-JP', { timeZone: 'Asia/Tokyo' }) 这类选项，但注意 Safari 对 timeZone 支持较晚（iOS 14+）

格式化输出容易踩的坑

直接拼接 date.getHours() + ':' + date.getMinutes() 看似简单，但会出错：分钟是 5 时显示成 9:5，而不是 9:05。

用 date.toLocaleTimeString() 最省心，它自动适配用户系统语言和格式习惯（中文 Win/mac 默认 24 小时制，部分英文系统是 12 小时制带 AM/PM）
要固定格式（如始终显示 HH:mm:ss），得手动补零：String(date.getHours()).padStart(2, '0')
避免用 date.toString().split(' ')[4] 这类字符串切片——不同浏览器返回的 toString() 格式不一致，Chrome 和 Firefox 差别明显

性能与兼容性底线提醒

这个功能看似简单，但在低端 Android 设备或后台标签页中，setInterval 可能被节流甚至暂停（尤其 Chrome 会在非活跃标签页把间隔拉长到 1 秒以上）。

如果对精度要求高（比如金融倒计时），别依赖 setInterval，改用 requestAnimationFrame + 时间差计算，或者每 10 秒从服务端同步一次时间戳
IE11 不支持 padStart 和 toLocaleTimeString 的 timeZone 选项，要用 Intl.DateTimeFormat 替代或加 polyfill
别把时间显示逻辑写在 document.write 或内联 onload 里——现代框架或静态站点生成器中，DOM 可能还没就绪