使用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;
}

/* 各个数字的旋转定位 */
.num1 { transform: rotate(30deg); }
.num2 { transform: rotate(60deg); }
/* ... 省略其他数字的旋转样式 ... */
.num12 { transform: rotate(0deg); } /* 12点通常在顶部，不需额外旋转 */


/* 指针通用样式 */
#minutes,
#hour,
#seconds {
  position: absolute;
  left: 50%; /* 水平居中 */
  top: 50%;  /* 垂直居中 */
  transform-origin: top center; /* 旋转中心点为元素的顶部中央 */
  /* 注意：初始的transform: rotate(...) 属性会被JavaScript覆盖，
     但如果JavaScript计算有误，这个初始值可能会影响视觉效果。
     通常，这里可以设置为 rotate(0deg) 或不设置，让JS完全控制。*/
}

/* 各个指针的具体样式 */
#hour {
  background-color: #e6c384;
  height: 100px;
  width: 8px;
  margin-left: -4px; /* 宽度的一半，用于精确居中 */
  margin-top: -100px; /* 向上偏移指针高度，使其底部在中心 */
}

#minutes {
  background-color: #6a9589;
  height: 120px;
  width: 4px;
  margin-left: -2px;
  margin-top: -120px;
}

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

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

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

  // 秒针计算
  const seconds = now.getSeconds();
  // 每秒移动6度 (360度 / 60秒)。
  // 加上180度偏移，因为transform-origin: top center; 使得0度时指针向下，
  // 180度时指针向上指向12点。
  const secondsHandAngle = ((seconds / 60) * 360) + 180;
  handSec.style.transform = `rotate(${secondsHandAngle}deg)`;

  // 分针计算
  const minutes = now.getMinutes();
  // 每分钟移动6度 (360度 / 60分钟)。
  // 额外加上秒数导致的微小移动，使分针平滑过渡。
  const minutesHandAngle = ((minutes / 60) * 360) + ((seconds / 60) * 6) + 180;
  handMin.style.transform = `rotate(${minutesHandAngle}deg)`;

  // 时针计算
  const hours = now.getHours();
  // 将小时转换为12小时制，并计算每小时移动30度 (360度 / 12小时)。
  // 额外加上分钟导致的微小移动，使时针平滑过渡。
  const hoursHandAngle = (((hours % 12) / 12) * 360) + ((minutes / 60) * 30) + 180;
  handHour.style.transform = `rotate(${hoursHandAngle}deg)`;
}

// 每秒调用一次更新函数
setInterval(updateClockHands, 1000);

// 页面加载时立即更新一次，避免初始延迟
updateClockHands();

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

function updateClockHands() {
  const now = new Date();

  // 获取当前秒数
  const seconds = now.getSeconds();
  // 计算秒针角度： (当前秒数 / 60秒) * 360度 + 180度初始偏移
  const secondsHandAngle = ((seconds / 60) * 360) + 180;
  handSec.style.transform = `rotate(${secondsHandAngle}deg)`;

  // 获取当前分钟数
  const minutes = now.getMinutes();
  // 计算分针角度： (当前分钟数 / 60分钟) * 360度 + (秒数 / 60) * 6度 (秒对分针的影响) + 180度初始偏移
  const minutesHandAngle = ((minutes / 60) * 360) + ((seconds / 60) * 6) + 180;
  handMin.style.transform = `rotate(${minutesHandAngle}deg)`;

  // 获取当前小时数 (0-23)
  const hours = now.getHours();
  // 计算时针角度： (当前小时数(12小时制) / 12小时) * 360度 + (分钟数 / 60) * 30度 (分对时针的影响) + 180度初始偏移
  const hoursHandAngle = (((hours % 12) / 12) * 360) + ((minutes / 60) * 30) + 180;
  handHour.style.transform = `rotate(${hoursHandAngle}deg)`;
}

// 设置定时器，每1000毫秒（1秒）更新一次时钟
setInterval(updateClockHands, 1000);

// 页面加载后立即调用一次，确保时钟在第一时间显示正确的时间
updateClockHands();