js实现简单圆盘时钟

本文实例为大家分享了js实现简单圆盘时钟的具体代码，供大家参考，具体内容如下

预览图：

js实现简单圆盘时钟

代码：

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

        // 生成数字
        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);
        }


        // 浏览器刚打开就显示，不会停顿
        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 ? 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)


        // 函数：获取时间
        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时钟特效点击查看：JavaScript时钟特效专题

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持NICE源码。

微信