js实现圆形时钟

<div id="clock">
  <div class="hand hour" id="hour"></div>
  <div class="hand minute" id="minute"></div>
  <div class="hand second" id="second"></div>
  <div class="number number1">1</div>
  <div class="number number2">2</div>
  <!-- ... 其他数字 ... -->
  <div class="number number12">12</div>
</div>

#clock {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 2px solid black;
}

.hand {
  position: absolute;
  bottom: 50%;
  left: 50%;
  transform-origin: 50% 100%;
}

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

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

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

.number {
  position: absolute;
  width: 100%;
  text-align: center;
  font-size: 14px;
}

/* ... 设置数字的位置 ... */

function updateClock() {
  const now = new Date();
  const hour = now.getHours() % 12;
  const minute = now.getMinutes();
  const second = now.getSeconds();

  // 计算指针的角度
  const hourAngle = (hour * 30) + (minute * 0.5);
  const minuteAngle = (minute * 6) + (second * 0.1);
  const secondAngle = second * 6;

  // 更新指针的位置
  document.getElementById('hour').style.transform = `rotate(${hourAngle}deg)`;
  document.getElementById('minute').style.transform = `rotate(${minuteAngle}deg)`;
  document.getElementById('second').style.transform = `rotate(${secondAngle}deg)`;
}

// 初始化时钟
updateClock();
// 每秒更新时钟
setInterval(updateClock, 1000);