在多个时区添加多个时钟

Question

我在一个 html 页面中有一个表格，该表格在全国各地都有网站。我想在每个站点添加一个包含当前时间的列。

我需要解决三个问题。首先是如何在同一页面上有多个时钟。其次是让他们在不同的时区。第三是处理夏令时。

我尝试了几种不同的 html 和 JavaScript 时钟，但无法显示多个实例。

我已经知道如何修改时钟以增加或减少小时数，但我还没有想出如何同时显示不同的时钟。

其中一个站点位于亚利桑那州，他们不执行夏令时。所以最好使用像 Moment Timezone 这样的东西来控制不同的时钟。

我对 JavaScript 的理解非常有限，所以我真的可以借助一些帮助来弄清楚这些东西。我真的没有找到任何东西可以告诉我如何用足够简单的语言解决我的问题让我理解。

Answer 1

您可以使用Date.toLocaleTimeString() 并在options 参数中提供时区：

const clocks = document.getElementsByClassName("clock");

function updateClocks() {
  for (let clock of clocks) {
    let timezone = clock.dataset.timezone;
    let time = new Date().toLocaleTimeString("en-US", {
      hour: '2-digit',
      minute:'2-digit',
      timeZone: timezone
    });
    clock.textContent = time;
  }
}

// Update every minute:
setInterval(updateClocks, 60000);
updateClocks();

.clock {
   font-family: sans-serif;
   border: thin solid;
   border-radius: 10px;
   padding: 5px;
}

<p>New York: <span class="clock" data-timezone="America/New_York"></span></p>
<p>Shanghai: <span class="clock" data-timezone="Asia/Shanghai"></span></p>
<p>Berlin: <span class="clock" data-timezone="Europe/Berlin"></span></p>