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>

在多个时区添加多个时钟

1 个答案: