javascript - Adding multiple clocks in multiple time zones - Stack Overflow

admin管理员组

文章数量:1431413

I have a table in a html page that has sites across the country. I want to add a column with the current time at each site.

There are three problems that I need to solve. First is how to have multiple clock on the same page. Second is having them in different time zones. Third is dealing with daylight savings time.

I have tried a couple different html and JavaScript clock but cannot get more that one instance to display.

I've figured out how to modify the clocks to add or subtract hours, but I haven't figured out how to display different clocks at the same time.

One of the sites is in AZ where they don't do daylight savings time. So it would be nice to use something like Moment Timezone to control the different clocks.

I'm very limited in my understanding of JavaScript, so I could really use some help figuring this stuff out. I really haven't found anything that tells me how to fix my problems in simple enough language for me to understand.

I have a table in a html page that has sites across the country. I want to add a column with the current time at each site.

There are three problems that I need to solve. First is how to have multiple clock on the same page. Second is having them in different time zones. Third is dealing with daylight savings time.

I have tried a couple different html and JavaScript clock but cannot get more that one instance to display.

I've figured out how to modify the clocks to add or subtract hours, but I haven't figured out how to display different clocks at the same time.

One of the sites is in AZ where they don't do daylight savings time. So it would be nice to use something like Moment Timezone to control the different clocks.

I'm very limited in my understanding of JavaScript, so I could really use some help figuring this stuff out. I really haven't found anything that tells me how to fix my problems in simple enough language for me to understand.

• javascript
• html

Share Improve this question Follow edited May 20, 2017 at 2:06 mouseskowitz asked May 20, 2017 at 1:55 mouseskowitzmouseskowitz 4522 silver badges1010 bronze badges 3

• @le_m Thanks. Like I said, I have a very limited understanding of what I'm doing here. – mouseskowitz Commented May 20, 2017 at 2:07
• 1 You can use this momentjs./timezone – alessandrio Commented May 20, 2017 at 2:16
• [timeanddate./clocks/free.html] might be help. In case you just need to add the clock and don't require any further customization. It would also require less logic. Apply it as a Iframe on your website. – Rohit Kumar Commented May 20, 2017 at 3:18

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

You can use Date.toLocaleTimeString() and provide a time zone within the options argument:

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>

本文标签： javascriptAdding multiple clocks in multiple time zonesStack Overflow