本文例項為大家分享了實現簡單圓盤時鐘的具體程式碼，供大家參考，具體內容如下

預覽圖：

程式碼：

：

<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 {
     www.cppcns.com
 
       position: absolute;
            top: 15px;
            left: 150www.cppcns.compx;
            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>http://www.cppcns.com;

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';
            }
        }

        // 生成數字
        for (var i = 0; i < 12; i++) {
            var num = document.createElement('div');
            var numx = document.createElement('spanwww.cppcns.com
 
');
            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);
        }


        // 瀏覽器剛開啟就顯示，不會停頓
        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)`;

        // 定時器，每過一秒執行一次
        setInterval(function() {
            var h = getTime().hours;
            h = h > 12 ? http://www.cppcns.comh - 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)


        // 函式：獲取時間
        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
            }
        }

更多時鐘特效點選檢視：Script時鐘特效專題

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。