更像真實的 Clock

現(xiàn)實中的 Clock 大部分是秒針和分針都是會跳動的，并且伴隨著滴答聲，我們來嘗試一下。

.hours-container {  animation: rotate 60s infinite linear;
}.minutes-container {  animation: rotate 3600s infinite steps(60);
}.seconds-container {  animation: rotate 60s infinite steps(60);
}

1、只需要將 分針 和 秒針的旋轉(zhuǎn)方式調(diào)整為 steps() 即可。

但是這樣的 Clock 每次刷新都是從 0 開始的，并不是我們需要的，怎么做一個顯示真實時間的呢？？

正確的時間

我們首先要獲取到當(dāng)前的時間，然后計算每個指針應(yīng)該旋轉(zhuǎn)的角度即可。

獲取每個指針

const hourHand = document.querySelector('.hours-container');const minuteHand = document.querySelector('.minutes-container');const secondHand = document.querySelector('.seconds-container');

獲取當(dāng)前時間

const now = new Date();const hour = now.getHours();const minute = now.getMinutes();const second = now.getSeconds();
`

計算每個指針應(yīng)旋轉(zhuǎn)的角度

在 CSS3 中角度單位一共有四種：

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 軸）做統(tǒng)一；

2、秒針的計算最簡單，(second / 60) * 360 + 90;

3、 分針要考慮秒針的影響，如過了30秒，相當(dāng)于半分鐘。公式為： 當(dāng)前分鐘數(shù) + 秒數(shù)在分鐘的映射；即：(( minutes/ 60) * 360) + ((seconds / 60) * 6) + 90;

4、 時針稍微復(fù)雜一點，因為要考慮分鐘的影響，如過了30分鐘，相當(dāng)于半小時。公式為： 當(dāng)前時數(shù) + 分鐘在小時的映射 。即：(( hours/ 12) * 360) + ((minutes / 60) * 30) + 90;

應(yīng)用角度值

hourHand.style.transform = `rotateZ(${hourDegree}deg)`;
minuteHand.style.transform = `rotateZ(${minuteDegree}deg)`;
secondHand.style.transform = `rotateZ(${secondDegree}deg)`;

為了使頁面能實時的更新，我們要把上面的這些東西封裝為一個函數(shù)，然后用定時器每秒執(zhí)行一次。

整個時鐘的功能都完成了！

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com