（30個原生js挑戰）原生js實現鐘錶

緊接着昨天的實例，第二個是原生js實現鐘錶特效。
首先介紹下大體思路，首先要用css把時針分針和秒針畫出來。而後根據鐘錶中，角度和時間的算法關係。

設置角度。

最後使用定時器，每秒運行一次。

須要注意的是，個人算法和以前的算法不同，這個能夠根據本身的想法實現，實現的效果是不同的。

首先知道鐘錶是360°，而後根據一個小時30°，來算出各個針的角度。

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/...