一个超简易小时钟<js>废话不多说,代码如下:在需要注释的地方我会加上注释人人为我,我为人人!skr~~~~!

废话不多说,代码如下:
在需要注释的地方我会加上注释
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /* #hour {
            width: 8px;
            height: 200px;
            background: red;
        } */
        .clock {
            width: 500px;
            height: 500px;
            background: black;
            margin: 80px auto;
            position: relative;
        }

        #sec {
            background: lightgreen;
            width: 4px;
            height: 200px;
            position: absolute;
            left: 50%;
            margin-left: -2px;
            top: 60px;
            transform-origin: center 190px;
        }

        #minute {
            background: hotpink;
            width: 6px;
            height: 150px;
            position: absolute;
            left: 50%;
            margin-left: -3px;
            top: 110px;
            transform-origin: center 140px;
        }

        #hour {
            background: greenyellow;
            width: 8px;
            height: 100px;
            position: absolute;
            left: 50%;
            margin-left: -4px;
            top: 160px;
            transform-origin: center 90px;
        }

        .scale div {
            width: 2px;
            height: 60px;
            background: white;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -1px;
            margin-top: -30px;
        }

        .scale div span {
            width: 100px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            position: absolute;
            left: 50%;
            margin-left: -50px;
            top: 60px;
            /* background: yellow;  */
            color: yellow;
        }

        .scale div:nth-of-type(1) {
            transform: rotateZ(0deg) translateY(-170px);
        }

        .scale div:nth-of-type(1) span {
            transform: rotateZ(-0deg)
        }

        .scale div:nth-of-type(2) {
            transform: rotateZ(90deg) translateY(-170px);
        }

        .scale div:nth-of-type(2) span {
            transform: rotateZ(-90deg)
        }

        .scale div:nth-of-type(3) {
            transform: rotateZ(180deg) translateY(-170px);
        }

        .scale div:nth-of-type(3) span {
            transform: rotateZ(-180deg)
        }

        .scale div:nth-of-type(4) {
            transform: rotateZ(270deg) translateY(-170px);
        }

        .scale div:nth-of-type(4) span {
            transform: rotateZ(-270deg)
        }
    </style>
</head>

<body>
    <div class="clock">
        <div id="hour"></div>
        <div id="minute"></div>
        <div id="sec"></div>
        <div class="scale">
            <div><span>12</span></div>
            <div><span>3</span></div>
            <div><span>6</span></div>
            <div><span>9</span></div>
        </div>
    </div>
    <script>
        //在JS中改变一个元素的样式：
        //  1. 取得该元素
        // var hour = document.getElementById('hour')
        //  2. 设定该元素的style.xxx属性
        // hour.style.background = 'yellow'
        // hour.style.transform = 'rotate(30deg)'

        function update() {
            var now = new Date();

            //取得毫秒
            var ms = now.getMilliseconds()

            //秒针
            var sec = now.getSeconds();
            var secPointer = document.getElementById('sec');
            var secDeg = sec * 360 / 60 + ms * 6 / 1000
            secPointer.style.transform = 'rotateZ(' + secDeg + 'deg)'

            //分针
            var minute = now.getMinutes();
            var minutePointer = document.getElementById('minute')
            var minuteDeg = minute * 360 / 60 + sec * 0.1;
            minutePointer.style.transform = 'rotateZ(' + minuteDeg + 'deg)'

            //小时
            var hour = now.getHours();
            var hourPointer = document.getElementById('hour')
            var hourDeg = hour * 360 / 12 + minute * 30 / 60;
            hourPointer.style.transform = 'rotateZ(' + hourDeg + 'deg)'
        }
        update()    //刷新页面时，立马执行一遍，设定指针的角度
        setInterval(update, 1000 / 60)
    </script>
</body>

</html>
人人为我,我为人人! skr~~~~!