如何在 javascript 中选择不同的时区？

Question

我使用 html、css 和 JS 为我正在开发的网站制作了一个模拟时钟。我希望这个时钟显示我想要的特定时区的时间，但是使用下面的代码只显示基于客户时间的时间。

实际上我的最终目标是拥有 5 个这样的模拟时钟，每个时钟都会显示不同的时间，例如悉尼、东京、法兰克福、伦敦和纽约。

有什么想法吗？

这是我的 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;
  }

这是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>

这是 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)`;
});

Answer 1

顺便说一句，我找到了答案。

我使用这个函数将当前时间转换为另一个时区：

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

希望对遇到类似问题的其他人有所帮助。

如何在 javascript 中选择不同的时区？

How can I choose a different timezone in javascript?

javascript

html

css

timezone

clock