Javascript 时钟 + CSS

Question

我正在学习 Javascript30.com 类(class)，我们必须做一个带有秒、分和小时的 JS 时钟。这是代码:

<div class="clock">
    <div class="clock-face">
      <div class="hand hour-hand"></div>
      <div class="hand min-hand"></div>
      <div class="hand second-hand"></div>
    </div>
  </div>

还有 JS:

const secondHand = document.querySelector('.second-hand');
const minsHand = document.querySelector('.min-hand');
const hourHand = document.querySelector('.hour-hand');

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

   const seconds = now.getSeconds();
   const secondsDegrees = ((seconds / 60) * 360) + 90;
   secondHand.style.transform = `rotate(${secondsDegrees}deg)`;

   const mins = now.getMinutes();
   const minsDegrees = ((mins / 60) * 360) + ((seconds/60)*6) + 90;
   minsHand.style.transform = `rotate(${minsDegrees}deg)`;

   const hour = now.getHours();
   const hourDegrees = ((hour / 12) * 360) + ((mins/60)*30) + 90;
   hourHand.style.transform = `rotate(${hourDegrees}deg)`;
}

setInterval(setDate, 1000);

setDate();

setDate 函数中的 + 90 部分是偏移量 - 因为我们正在制作 JS 时钟，我们使用 CSS 将箭头转换为 90 度 Angular ，所以这只是修复偏移量。

除了分配给 hourDegrees 和 minsDegrees 的语句外，我了解所有内容。

为什么教育者要将 + ((seconds/60)*6) 和 + ((mins/60)*30) 添加到 hourDegrees 和 minsDegrees?

Answer 1

每 60 秒为下一个位置准备分针，每 60 分钟滴答为时针做同样的事情。

假设时间是17:17:41

计算分针现在

多少度minsDegrees = (17/60) * 360 = 102

加上；

计算经过的秒数使我们的分针转动了多少度；

theDegreeFromSeconds = (41/60) *6= 4.1

minDegree = 102 + 4.1 = 106.1

我们乘以 6，因为顺便说一句，每经过一秒，时钟就变成了 6°。小时度计算同上。