js实现简单圆盘时钟

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

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

// 获取元素        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            }        }