JavaScript模拟时钟指针校准：解决时间显示不准确问题

<div id="circle">
  <div id="hour"></div>
  <div id="minutes"></div>
  <div id="seconds"></div>
  <div class="num num1">1</div>
  <div class="num num2">2</div>
  <div class="num num3">3</div>
  <div class="num num4">4</div>
  <div class="num num5">5</div>
  <div class="num num6">6</div>
  <div class="num num7">7</div>
  <div class="num num8">8</div>
  <div class="num num9">9</div>
  <div class="num num10">10</div>
  <div class="num num11">11</div>
  <div class="num num12">12</div>
</div>

#circle {
  background-color: #363646;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  border: 6px solid #938aa9;
  position: relative;
}

#circle .num {
  position: absolute;
  width: 100%;
  height: 100%;
  text-align: center;
  font-family: monospace;
  font-size: 20px;
  color: #dcd7ba;
}

/* 数字刻度定位 */
#circle .num1 { transform: rotate(30deg); }
#circle .num2 { transform: rotate(60deg); }
#circle .num3 { transform: rotate(90deg); }
#circle .num4 { transform: rotate(120deg); }
#circle .num5 { transform: rotate(150deg); }
#circle .num6 { transform: rotate(180deg); }
#circle .num7 { transform: rotate(210deg); }
#circle .num8 { transform: rotate(240deg); }
#circle .num9 { transform: rotate(270deg); }
#circle .num10 { transform: rotate(300deg); }
#circle .num11 { transform: rotate(330deg); }
#circle .num12 { transform: rotate(0deg); /* 12点在顶部，0度 */ }


#minutes,
#hour,
#seconds {
  position: absolute;
  left: 50%;
  top: 50%;
  /* 关键点：旋转原点位于元素的顶部中心 */
  transform-origin: top center;
}

/* 指针样式和初始（可能被JS覆盖）旋转 */
#hour {
  background-color: #e6c384;
  height: 100px;
  width: 8px;
  /* transform: rotate(125deg); /* 初始旋转，通常会被JS覆盖 */
}

#minutes {
  background-color: #6a9589;
  height: 120px;
  width: 4px;
  /* transform: rotate(255deg); /* 初始旋转，通常会被JS覆盖 */
}

#seconds {
  background-color: #9cabca;
  height: 127px;
  width: 2px;
}

const handHour = document.querySelector("#hour");
const handMin = document.querySelector("#minutes");
const handSec = document.querySelector("#seconds");

function updateClockHands() {
  const now = new Date(); // 获取当前时间

  // 获取秒数，并计算秒针角度
  // (seconds / 60) * 360: 将0-59秒映射到0-359度
  // + 180: 修正偏移量，因为transform-origin: top center; 使得0度时指针指向6点钟方向。
  //        为了让0秒指向12点方向（向上），需要额外旋转180度。
  const seconds = now.getSeconds();
  const secondsHandAngle = ((seconds / 60) * 360) + 180;
  handSec.style.transform = `rotate(${secondsHandAngle}deg)`;

  // 获取分钟数，并计算分针角度
  // (minutes / 60) * 360: 将0-59分钟映射到0-359度
  // (seconds / 60) * 6: 使分针平滑移动，每秒移动0.1度 (360度/60分钟 = 6度/分钟；6度/分钟 / 60秒/分钟 = 0.1度/秒)
  // + 180: 同样的偏移量修正
  const minutes = now.getMinutes();
  const minutesHandAngle = ((minutes / 60) * 360) + ((seconds / 60) * 6) + 180;
  handMin.style.transform = `rotate(${minutesHandAngle}deg)`;

  // 获取小时数，并计算时针角度
  // now.getHours() 返回0-23，需要转换为12小时制，并处理0点为12点的情况。
  // (hours / 12) * 360: 将0-11小时映射到0-359度
  // (minutes / 60) * 30: 使时针平滑移动，每分钟移动0.5度 (360度/12小时 = 30度/小时；30度/小时 / 60分钟/小时 = 0.5度/分钟)
  // + 180: 同样的偏移量修正
  let hours = now.getHours();
  // 将24小时制转换为12小时制，并处理0点（午夜）为12点
  hours = hours % 12; // 0-11
  if (hours === 0) hours = 12; // 0点显示为12点，方便计算

  const hoursHandAngle = ((hours / 12) * 360) + ((minutes / 60) * 30) + 180;
  handHour.style.transform = `rotate(${hoursHandAngle}deg)`;
}

// 每秒更新一次时钟
setInterval(updateClockHands, 1000);

// 首次加载时立即更新，避免延迟显示
updateClockHands();