.hours-container { animation: rotate 60s infinite linear; }.minutes-container { animation: rotate 3600s infinite steps(60); }.seconds-container { animation: rotate 60s infinite steps(60); }
1、只需要将 分针 和 秒针的旋转方式调整为 steps() 即可。
但是这样的 Clock 每次刷新都是从 0 开始的，并不是我们需要的，怎么做一个显示真实时间的呢？？
正确的时间
我们首先要获取到当前的时间，然后计算每个指针应该旋转的角度即可。
获取每个指针
const hourHand = document.querySelector('.hours-container');const minuteHand = document.querySelector('.minutes-container');const secondHand = document.querySelector('.seconds-container');
获取当前时间
const now = new Date();const hour = now.getHours();const minute = now.getMinutes();const second = now.getSeconds(); `
计算每个指针应旋转的角度
在 CSS3 中角度单位一共有四种：
deg (度，一个圆 360 度)、
grad（梯度，一个圆共400梯度）、
turn （转、圈，一个圆共1圈）、
rad （弧度，一个圆共2π弧度）
它们的对应关系为：
90deg = 100grad = 0.25turn ≈ 1.570796326794897rad
很显然，我们这里要用到的单位是 deg 。
const secondDegree = second * 6 + 90; const minuteDegree = minute * 6 + (second / 10) + 90; const hourDegree = (hour * 30) + (minute / 2) + 90;
1、+90 是因为角度的起始位置为水平的 X 轴，为了和 Clock 指针起始位置（Y 轴）做统一；
2、秒针的计算最简单，(second / 60) * 360 + 90;
3、 分针要考虑秒针的影响，如过了30秒，相当于半分钟。公式为： 当前分钟数 + 秒数在分钟的映射；即：(( minutes/ 60) * 360) + ((seconds / 60) * 6) + 90;
4、 时针稍微复杂一点，因为要考虑分钟的影响，如过了30分钟，相当于半小时。公式为： 当前时数 + 分钟在小时的映射 。即：(( hours/ 12) * 360) + ((minutes / 60) * 30) + 90;
应用角度值
hourHand.style.transform = `rotateZ(${hourDegree}deg)`; minuteHand.style.transform = `rotateZ(${minuteDegree}deg)`; secondHand.style.transform = `rotateZ(${secondDegree}deg)`;
为了使页面能实时的更新，我们要把上面的这些东西封装为一个函数，然后用定时器每秒执行一次。
整个时钟的功能都完成了！
您可能感兴趣的文章: