How can I choose a different timezone in javascript?

Question

I made an analog clock using html, css, and JS for a website I'm working on. I want this clock to show time in a specific timezone which I want, but using the codes below it only shows time based on client's time.

actually my final goal is to have 5 of these analog clocks and each would show a different time like Sydney, Tokyo, Frankfurt, London and New York.

any ideas how to do that?

this is my clock.css:

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #091921;
  }

.clock {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background-image: url("https://i.postimg.cc/hjVspvcJ/clock.png");
    background-size: cover;
    display: flex;
    background-color: #D3D3D3;
    justify-content: center;
    align-items: center;
    box-shadow: 0 -5px 5px rgba(255, 255, 255, 0.05),
      inset 0 -5px 5px rgba(255, 255, 255, 0.05), 0 5px 5px rgba(0, 0, 0, 0.3),
      inset 0 5px 5px rgba(0, 0, 0, 0.3);
  } 
.clock::before {
    content: "";
    width: 5px;
    height: 5px;
    position: absolute;
    background-color: #000000;
    border-radius: 50%;
    z-index: 1000;
  }
  
  .hour,
  .min,
  .sec {
    position: absolute;
  }
  
  .hr {
    width: 64px;
    height: 64px;
  }

  .mn {
    width: 76x;
    height: 76px;
  }
  
  .sc {
    width: 92px;
    height: 92px;
  }
  
  .hr,
  .mn,
  .sc {
    display: flex;
    justify-content: center;
  }

  .hr::before {
    content: "";
    width: 3px;
    height: 32px;
    background-color: #000000;
    z-index: 100;
    border-radius: 2px;
  }

  .mn::before {
    content: "";
    width: 2px;
    height: 36px;
    background-color: #000000;
    z-index: 11;
    border-radius: 2px;
  }
  
  .sc::before {
    content: "";
    width: 1px;
    height: 56px;
    background-color: #000000;
    z-index: 10;
    border-radius: 2px;
  }

this is clock.html:

<html>
<head>
    <link rel="stylesheet" href="clock.css">
</head>
     <body>
        <div class="clock">
            <div class="hour">
              <div class="hr" id="hr"></div>
            </div> 
            <!-- <button class=  id="nine">9</button>
             <button class= -bg" id="divide">/</button>
             <button class=" ary" id="four">4</button>-->
            <div class="min">
              <div class="mn" id="mn"></div>
            </div>
            <div class="sec">
              <div class="sc" id="sc"></div>
            </div>
          </div>  
    

    
          <script src="clock.js"></script>

     </body>
</html>

and this is clock.js:

const deg = 6;  
const hr = document.querySelector("#hr");
const mn = document.querySelector("#mn");
const sc = document.querySelector("#sc");
  /*height: 3px;
  background-color: #fb7454;
  opacity: 0.8;*/
setInterval(() => {
  let day = new Date();
  let hh = day.getHours() * 30; //360deg / 12 hour => 30
  let mm = day.getMinutes() * deg;
  let ss = day.getSeconds() * deg;
  /*height: 3px;
  background-color: #fb7454;
  opacity: 0.8;*/
  hr.style.transform = `rotateZ(${hh + mm / 12}deg)`;
  mn.style.transform = `rotateZ(${mm}deg)`;
  sc.style.transform = `rotateZ(${ss}deg)`;
});

Check this answer: [how to get time zone of city or country in javascript](https://stackoverflow.com/questions/37001869/how-to-get-time-zone-of-city-or-country-in-javascript) — Emiel Zuurbier, Jan 06 '21 at 22:59

score 0 · Accepted Answer · answered Jan 15 '21 at 11:38

Btw guys I found the answer.

I used this function to convert the current time to annother time zone:

function convertTZ(date, tzString) {
  return new Date((typeof date === "string" ? new Date(date) : date).toLocaleString("en-US", {timeZone: tzString}));

I hope this helps others with similar problem.

How can I choose a different timezone in javascript?

1 Answers1