用JavaScript做一个世界时钟

一、别手写时差，用 Intl 的 timeZone

最早我打算存"纽约 = 北京 -12 小时"自己减，结果夏令时期间变成 -13，全乱了。正确做法是用浏览器内置的 Intl.DateTimeFormat，它认识 IANA 时区名，夏令时自动处理：

function cityTime(tz, locale = 'zh-CN') {
  return new Intl.DateTimeFormat(locale, {
    timeZone: tz,
    hour: '2-digit', minute: '2-digit', second: '2-digit',
    hour12: false,
  }).format(new Date());
}
cityTime('America/New_York');  // "20:14:09"（自动按夏令时）
cityTime('Asia/Tokyo');        // "09:14:09"

timeZone 填的是像 Asia/Shanghai、Europe/London 这种 IANA 名，不是 "GMT+8"。后者不跟夏令时，前者跟。伦敦夏令时那几个月会自动从 GMT 切到 BST，Intl 替你搞定。

二、同时显示多个城市

城市列表存数组，渲染时逐个取时间。

let cities = [
  { name: '北京', tz: 'Asia/Shanghai' },
  { name: '纽约', tz: 'America/New_York' },
  { name: '伦敦', tz: 'Europe/London' },
  { name: '东京', tz: 'Asia/Tokyo' },
];
function render() {
  list.innerHTML = cities.map(c =>
    `<li>${c.name}：<b>${cityTime(c.tz)}</b></li>`
  ).join('');
}
setInterval(render, 1000);

三、增删城市

用户自己加城市，存的是 {name, tz}。时区名可以做成下拉（常见那十几个），避免手敲拼错。

四、常见时区对照

小结

世界时钟别自己减时差——夏令时一变就错。用 Intl.DateTimeFormat 配 IANA 时区名（如 America/New_York），浏览器自动处理夏令时切换。多城市就是把 {name, tz} 数组逐个 format，每秒刷新一次。存城市用下拉选时区名，别让用户手敲，避免拼错。