JavaScript實(shí)現(xiàn)仿Clock ISO時(shí)鐘

更像真實(shí)的 Clock

現(xiàn)實(shí)中的 Clock 大部分是秒針和分針都是會(huì)跳動(dòng)的，并且伴隨著滴答聲，我們來(lái)嘗試一下。

.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 開(kāi)始的，并不是我們需要的，怎么做一個(gè)顯示真實(shí)時(shí)間的呢？？

正確的時(shí)間

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

獲取每個(gè)指針

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

獲取當(dāng)前時(shí)間

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

計(jì)算每個(gè)指針應(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 是因?yàn)榻嵌鹊钠鹗嘉恢脼樗降?X 軸，為了和 Clock 指針起始位置（Y 軸）做統(tǒng)一；

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

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

4、 時(shí)針稍微復(fù)雜一點(diǎn)，因?yàn)橐紤]分鐘的影響，如過(guò)了30分鐘，相當(dāng)于半小時(shí)。公式為： 當(dāng)前時(shí)數(shù) + 分鐘在小時(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)`;

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

整個(gè)時(shí)鐘的功能都完成了！

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