纯html无法构建多时区网页，必须依赖javascript；intl.datetimeformat是唯一可靠方案，支持夏令时、历史规则和iana时区名；服务端应返回utc时间，前端用intl动态渲染；避免手动计算偏移、硬编码缩写及setinterval定时，改用requestanimationframe；城市列表需localstorage持久化iana时区名数组，并注意大小写精确匹配。
纯 HTML 无法构建多时区支持的网页应用——它没有时间计算、时区转换或实时更新能力。所有关键逻辑必须由 JavaScript 完成，HTML 只负责承载容器和结构。
Intl.DateTimeFormat 是唯一靠谱的时区格式化方案
浏览器原生 Intl.DateTimeFormat 能自动处理夏令时切换、历史规则、IANA 时区名（如 "Europe/Berlin"）映射，且零依赖、无兼容性包袱（Chrome 24+/Firefox 29+/Safari 10+ 均支持）。
- 别用
Date.prototype.getTimezoneOffset()手动加减小时——它只返回本地偏移，对目标时区无效，且无法应对 DST 切换 - 避免硬编码缩写如
"PST"或"CST"——它们不唯一（美国/中国/澳大利亚都有 CST），也不含夏令时上下文 - 服务端应统一返回 UTC 时间戳（毫秒数）或带
Z后缀的 ISO 字符串（如"2026-07-08T15:06:00Z"），前端再交由Intl.DateTimeFormat渲染 - 动态切换时区时，直接新建
Intl.DateTimeFormat实例比复用更安全；构造开销可忽略，现代引擎已深度优化
每秒更新不能靠 setInterval(setTimeout(..., 1000))
单纯用 setInterval 每秒触发一次格式化，会导致时间跳变或卡顿：渲染耗时 + JS 主线程阻塞会让实际间隔偏离 1000ms，尤其在低端设备或标签页后台时更明显。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 正确做法是用
requestAnimationFrame驱动，结合当前时间戳计算剩余毫秒，只在真正需要重绘时更新 DOM - 例如：先取
new Date().getTime() % 1000得到当前秒内偏移，再用1000 - offset设定首次延迟，后续每秒调用一次 - 若页面被切换到后台，
setInterval在多数浏览器中会降频至最低 1s 甚至暂停，而requestAnimationFrame会直接停止——此时应监听visibilitychange，在切回前台时立即刷新一次，避免显示过期时间
城市列表管理必须配合 localStorage 持久化
用户添加/删除城市后若不保存，刷新即丢失配置，体验断裂。但 localStorage 存的是字符串，直接存 Date 对象会变成 "Invalid Date"。
- 只存城市对应的 IANA 时区名数组，如
["Asia/Shanghai", "America/New_York"]，每次加载时重新创建Intl.DateTimeFormat实例 - 不要存格式化后的字符串结果——那会固化为某个时刻的快照，失去实时性
- 注意 Safari 的无痕模式下
localStorage可能抛出 QuotaExceededError，需包裹try/catch并降级为内存缓存 - 删除城市时，用
Array.filter()而非splice()，避免因索引错位误删其他项
最易被忽略的一点：时区名大小写敏感且必须精确匹配 IANA 数据库，比如 "asia/shanghai" 或 "Asia/shanghai" 都会失败，只能是 "Asia/Shanghai"。拼错一个字母，Intl.DateTimeFormat 就静默退化为本地时区，而控制台不报错——你得手动检查 resolvedOptions().timeZone 返回值才能发现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
