js表盘效果

<div id="clock">
  <div id="hour-hand"></div>
  <div id="minute-hand"></div>
  <div id="second-hand"></div>
</div>

#clock {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #f0f0f0;
  position: relative;
}

#hour-hand, #minute-hand, #second-hand {
  position: absolute;
  bottom: 50%;
  left: 50%;
  transform-origin: 50% 100%;
}

#hour-hand {
  width: 4px;
  height: 50px;
  background-color: black;
}

#minute-hand {
  width: 3px;
  height: 70px;
  background-color: black;
}

#second-hand {
  width: 2px;
  height: 80px;
  background-color: red;
}

function updateClock() {
  const now = new Date();
  const seconds = now.getSeconds();
  const minutes = now.getMinutes();
  const hours = now.getHours();

  const secondDegrees = ((seconds / 60) * 360) + 90;
  const minuteDegrees = ((minutes / 60) * 360) + ((seconds/60)*6) + 90;
  const hourDegrees = ((hours / 12) * 360) + ((minutes/60)*30) + 90;

  document.getElementById('second-hand').style.transform = `rotate(${secondDegrees}deg)`;
  document.getElementById('minute-hand').style.transform = `rotate(${minuteDegrees}deg)`;
  document.getElementById('hour-hand').style.transform = `rotate(${hourDegrees}deg)`;
}

setInterval(updateClock, 1000);