在多个时区添加多个时钟

Question

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

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

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

我已经弄清楚如何修改时钟以增加或减少小时数，但是我还没有弄清楚如何同时显示不同的时钟。

其中一个站点位于AZ，他们不做夏令时。因此，最好使用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>