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;
  /* 居中显示，仅为示例 */
  margin: 50px auto;
}

#circle .num {
  position: absolute;
  width: 100%;
  height: 100%;
  text-align: center;
  font-family: monospace;
  font-size: 20px;
  color: #dcd7ba;
  /* 确保数字垂直居中 */
  line-height: 300px; /* 与 #circle 的 height 相同 */
}

/* 数字位置调整 */
#circle .num1 { transform: rotate(30deg) translate(0, -45%); }
#circle .num2 { transform: rotate(60deg) translate(0, -45%); }
#circle .num3 { transform: rotate(90deg) translate(0, -45%); }
#circle .num4 { transform: rotate(120deg) translate(0, -45%); }
#circle .num5 { transform: rotate(150deg) translate(0, -45%); }
#circle .num6 { transform: rotate(180deg) translate(0, -45%); }
#circle .num7 { transform: rotate(210deg) translate(0, -45%); }
#circle .num8 { transform: rotate(240deg) translate(0, -45%); }
#circle .num9 { transform: rotate(270deg) translate(0, -45%); }
#circle .num10 { transform: rotate(300deg) translate(0, -45%); }
#circle .num11 { transform: rotate(330deg) translate(0, -45%); }
#circle .num12 { transform: rotate(0deg) translate(0, -45%); } /* 12点 */


#minutes,
#hour,
#seconds {
  position: absolute;
  left: 50%;
  top: 50%;
  /* 旋转中心点在其顶部中心，即指针的根部 */
  transform-origin: top center;
  /* 初始transform可以移除，因为JS会动态设置 */
  /* transform: rotate(0deg); */
}

#hour {
  background-color: #e6c384;
  height: 100px;
  width: 8px;
  /* 初始 transform 仅用于演示，实际由 JS 覆盖 */
  /* transform: rotate(125deg); */
}

#minutes {
  background-color: #6a9589;
  height: 120px;
  width: 4px;
  /* 初始 transform 仅用于演示，实际由 JS 覆盖 */
  /* transform: rotate(255deg); */
}

#seconds {
  background-color: #9cabca;
  height: 127px;
  width: 2px;
  /* 初始 transform 仅用于演示，实际由 JS 覆盖 */
  /* transform: rotate(0deg); */
}

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 secondsHandRotation = ((seconds / 60) * 360) + 180;
  handSec.style.transform = `rotate(${secondsHandRotation}deg)`;

  // 分针计算
  const minutes = now.getMinutes();
  // (分钟数 / 60) * 360 度，加上秒数引起的平滑偏移，再加 180 度偏移量
  const minutesHandRotation = ((minutes / 60) * 360) + ((seconds / 60) * 6) + 180;
  handMin.style.transform = `rotate(${minutesHandRotation}deg)`;

  // 时针计算
  const hours = now.getHours();
  // (小时数 / 12) * 360 度，加上分钟数引起的平滑偏移，再加 180 度偏移量
  // 注意：getHours() 返回 0-23，需要对 12 取模以适应 12 小时制表盘
  const hourshandRotation = ((hours % 12 / 12) * 360) + ((minutes / 60) * 30) + 180;
  handHour.style.transform = `rotate(${hourshandRotation}deg)`;
}

// 每秒更新一次指针位置
setInterval(updateClockHands, 1000);

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