js實(shí)現(xiàn)簡單圓盤時(shí)鐘

更新時(shí)間：2021年09月14日 10:44:41 作者：山與小島

這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)簡單圓盤時(shí)鐘，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了js實(shí)現(xiàn)簡單圓盤時(shí)鐘的具體代碼，供大家參考，具體內(nèi)容如下

預(yù)覽圖：

代碼：

css：

<style>
        .disc {
            position: relative;
            margin: 200px auto;
            width: 300px;
            height: 300px;
            border: 1px solid #000;
            border-radius: 50%;
        }
        
        .axis {
            position: absolute;
            top: 150px;
            left: 150px;
            transform: translate(-50%, -50%);
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: #000;
        }
        
        .hourHand {
            position: absolute;
            top: 150px;
            left: 147px;
            width: 6px;
            height: 80px;
            background-color: #000;
            transform-origin: 3px 0;
        }
        
        .minuteHand {
            position: absolute;
            top: 150px;
            left: 148px;
            width: 4px;
            height: 110px;
            background-color: #000;
            transform-origin: 2px 0;
        }
        
        .secondHand {
            position: absolute;
            top: 150px;
            left: 149px;
            width: 2px;
            height: 130px;
            background-color: #000;
            transform-origin: 1px 0;
        }
        
        .scale {
            position: absolute;
            top: 0;
            left: 150px;
            transform-origin: 2.5px 150px;
            width: 2px;
            height: 5px;
            background-color: #000;
        }
        
        .num {
            position: absolute;
            top: 15px;
            left: 150px;
            width: 20px;
            height: 20px;
            color: 16px;
            text-align: center;
            line-height: 20px;
            transform-origin: 50% 135px;
        }
        
        .num span {
            display: block;
            transform-origin: 50% 50%;
        }
</style>

html：

<div class="disc">
        <div class="axis"></div>
        <div class="hourHand"></div>
        <div class="minuteHand"></div>
        <div class="secondHand"></div>

</div>

js：

// 獲取元素
        var disc = document.getElementsByClassName('disc')[0];
        var hourHand = document.getElementsByClassName('hourHand')[0];
        var minuteHand = document.getElementsByClassName('minuteHand')[0];
        var secondHand = document.getElementsByClassName('secondHand')[0];
        var scale = document.getElementsByClassName('scale');

        // 生成刻度
        for (var i = 0; i < 60; i++) {
            var scale = document.createElement('div');
            scale.classList.add('scale');
            scale.style.transform = `translate(-50%) rotate(${i*6}deg)`;
            disc.appendChild(scale);
            scale.style.transform = `translate(-50%) rotate(${i*6}deg)`;
            if (i % 5 === 0) {
                scale.style.width = 4 + 'px';
                scale.style.height = 12 + 'px';
            }
        }

        // 生成數(shù)字
        for (var i = 0; i < 12; i++) {
            var num = document.createElement('div');
            var numx = document.createElement('span');
            num.classList.add('num');
            num.style.transform = `translate(-50%) rotate(${i*30+30}deg)`;
            numx.style.transform = `rotate(${-i*30-30}deg)`;
            numx.innerHTML = i + 1;
            disc.appendChild(num);
            num.appendChild(numx);
        }


        // 瀏覽器剛打開就顯示，不會(huì)停頓
        var h = getTime().hours;
        h = h > 12 ? h - 12 : h;
        hourHand.style.transform = `rotate(${h*30-180+(getTime().minute*0.5)}deg)`;
        minuteHand.style.transform = `rotate(${getTime().minute*6-180}deg)`;
        secondHand.style.transform = `rotate(${getTime().second*6-180}deg)`;

        // 定時(shí)器，每過一秒執(zhí)行一次
        setInterval(function() {
            var h = getTime().hours;
            h = h > 12 ? h - 12 : h;
            hourHand.style.transform = `rotate(${h*30-180+(getTime().minute*0.5)}deg)`;
            minuteHand.style.transform = `rotate(${getTime().minute*6-180}deg)`;
            secondHand.style.transform = `rotate(${getTime().second*6-180}deg)`;
        }, 1000)


        // 函數(shù)：獲取時(shí)間
        function getTime() {
            var date = new Date();
            var year = date.getFullYear();
            var month = date.getMonth();
            month = month < 10 ? '0' + month : month;
            var day = date.getDate();
            day = day < 10 ? '0' + day : day;
            var week = date.getDay();
            var weeks = ['日', '一', '二', '三', '四', '五', '六'];
            var weekZn = weeks[week];
            var hou = date.getHours();
            hou = hou < 10 ? '0' + hou : hou;
            var min = date.getMinutes();
            min = min < 10 ? '0' + min : min;
            var sec = date.getSeconds();
            sec = sec < 10 ? '0' + sec : sec;
            return {
                year: year,
                month: month,
                day: day,
                week: weekZn,
                hours: hou,
                minute: min,
                second: sec
            }
        }

更多JavaScript時(shí)鐘特效點(diǎn)擊查看：JavaScript時(shí)鐘特效專題

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: