@Blog{zip358.com}

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

.clock {
  /* width: 200px;
  height: 200px;
  border: 2px solid rgb(226, 226, 226); */
  border-radius: 50%;
}

.hand {
  position: absolute;
  bottom: 50%;
  left: 50%;
  transform-origin: bottom;
  background: #333!important;
}

.hour-hand {
  width: 4px;
  height: 60px;
  background: #333!important;;
}

.minute-hand {
  width: 3px;
  height: 80px;
  background: #666!important;;
}

.second-hand {
  width: 2px;
  height: 90px;
  background: rgb(94, 93, 93)!important;;
}

.center-clock {
  width: 10px;
  height: 10px;
  background: rgb(95, 95, 95)!important;;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
}

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

            // 角度の計算
            const hourDeg = (hours % 12 + minutes / 60) * 30; // 12時間で360度
            const minuteDeg = (minutes + seconds / 60) * 6; // 60分で360度
            const secondDeg = seconds * 6; // 60秒で360度

            // 針の回転
            document.querySelector('.hour-hand').style.transform = `translateX(-50%) rotate(${hourDeg}deg)`;
            document.querySelector('.minute-hand').style.transform = `translateX(-50%) rotate(${minuteDeg}deg)`;
            document.querySelector('.second-hand').style.transform = `translateX(-50%) rotate(${secondDeg}deg)`;
        }

        // 初回実行
        updateClock();
        // 1秒ごとに更新
        setInterval(updateClock, 1000);