JavaScript数字模拟时钟setInterval函数及指针转动原理问询

一、setInterval的工作机制 #

• setInterval是JavaScript里用来定时重复执行代码的工具，它会每隔指定的毫秒数，自动跑一遍里面的回调函数。
• 你这段代码里没写间隔时间（第二个参数），默认是0，但浏览器为了性能，实际每次执行的间隔大概是4毫秒左右。
• 它的作用就是让时钟“动起来”：每隔一小段时间就重新获取当前系统时间，算出三个指针该转多少度，再修改页面上指针元素的旋转样式，这样指针就能跟着时间走了。

二、指针转动的数学计算逻辑 #

先搞清楚时钟的基本常识：时钟是个360度的圆，秒针、分针转一圈要走60个小格（对应60秒/60分钟），时针转一圈是12个大格（对应12小时）。

1. 为什么定义deg = 6？ #

360度 ÷ 60（秒/分的总小格数）= 6度。意思就是每过1秒，秒针转6度；每过1分钟，分针也转6度，用这个常量能简化后续的角度计算。

2. 秒针的转动逻辑 #

let sec = day.getSeconds() * deg;
sc.style.transform = `rotateZ(${sec}deg)`;

• day.getSeconds()会拿到当前的秒数（0到59之间），乘以6度就是秒针需要转的总角度。
• 举个例子：现在是20秒，20×6=120度，秒针就会指向4的位置，刚好对应120度。

3. 分针的转动逻辑 #

let min = day.getMinutes() * deg;
mn.style.transform = `rotateZ(${min}deg)`;

• 和秒针逻辑完全一样：day.getMinutes()拿到当前分钟数（0到59），乘以6度得到分针的旋转角度。
• 例子：现在是40分钟，40×6=240度，分针指向8的位置，没错。

4. 时针的转动逻辑（最复杂的部分） #

let hrs = day.getHours() * 30;
hr.style.transform = `rotateZ(${(hrs)+(min/12)}deg)`;

• 首先，时针转一圈是12小时，360度÷12=30度，所以每过1小时，时针转30度。day.getHours()返回0到23（24小时制），比如14点（下午2点）就是14×30=420度，减去360度就是60度，刚好对应2点的位置，自动适配了24小时制。
• 然后重点：时针不会死死卡在整点，比如1点30分，时针应该在1和2中间。这里的min/12就是算分钟带来的偏移——min是分针的总角度（30分对应180度），180÷12=15度，加上1小时的30度，总角度45度，正好是1点30分时针的位置。本质上，时针每分钟转0.5度（30度÷60分钟），而min/12等价于(分钟数×6)÷12 = 分钟数×0.5，刚好和实际的偏移量对上。

内容的提问来源于stack exchange，提问作者MINGJI