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

问题描述

我为我正在开发的网站使用 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)`;
});

标签： javascripthtmlcsstimezoneclock

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

问题描述

解决方案

推荐阅读