緊接著昨天的實(shí)例，第二個(gè)是原生js實(shí)現(xiàn)鐘表特效。
首先介紹下大致思路，首先要用css把時(shí)針分針和秒針畫出來(lái)。然后根據(jù)鐘表中，角度和時(shí)間的算法關(guān)系。

設(shè)置角度。

最后使用定時(shí)器，每秒運(yùn)行一次。

需要注意的是，我的算法和之前的算法不一樣，這個(gè)可以根據(jù)自己的想法實(shí)現(xiàn)，實(shí)現(xiàn)的效果是不一樣的。

首先知道鐘表是360°，然后根據(jù)一個(gè)小時(shí)30°，來(lái)算出各個(gè)針的角度。

https://github.com/CookaCooki... 附上gayhub地址

<script>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();</script>

最后符上知乎地址 https://zhuanlan.zhihu.com/p/...

總結(jié)

以上是生活随笔為你收集整理的（30个原生js挑战）原生js实现钟表的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。