快乐小demo-利用JS圆周运动实现钟表_js 圆周运动demo-CSDN博客

本文链接：https://blog.csdn.net/s2422617864/article/details/108681084
这里是圆周运动呀并不是网上很多的角度旋转

代码如下
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: red;
            position: absolute;
            left: 0;
            top: 0;
        }

        .box2 {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: purple;
            position: absolute;
            left: 0;
            top: 0;
        }

        .box3 {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: black;
            position: absolute;
            left: 0;
            top: 0;
        }

        #lei {
            position: absolute;
            left: 400px;
            top: 0px;
            border-radius: 50%;
            background-color: seagreen;
            border: 1px solid black;
            width: 400px;
            height: 400px;
        }

        span {
            position: absolute;
            font-weight: 700;
        }
    </style>
</head>

<body>
    <div id="lei">
        <span>6</span>
        <span>5</span>
        <span>4</span>
        <span>3</span>
        <span>2</span>
        <span>1</span>
        <span>12</span>
        <span>11</span>
        <span>10</span>
        <span>9</span>
        <span>8</span>
        <span>7</span>
    </div>
    <script>
        var oSpan = document.querySelectorAll('span');
        getClock();
        var reg = 0;
        var timeSecond = '';
        var date = new Date;
        console.log(date);
        var h = gettimes(date.getHours()) + 1;
        var m = date.getMinutes() + 1;
        var s = date.getSeconds();
        console.log(h, m, s);
        hreg = h * 30;
        mreg = m * 6;
        sreg = s * 6;
        //设置颜色变量
        var box3 = 'box3';
        var box2 = 'box2';
        var box1 = 'box1';
        // console.log(hreg, mreg, sreg);
        //秒针函数
        clock(200, 6, 1000, sreg - 90, box3);
        //计算时针秒针差值
        var dv = 60 - parseInt(s);
        var dv1 = 60 - parseInt(m);
        //在初始显示分针
        var div888 = document.createElement("div");
        div888.className = "box2";
        var ta = Math.sin(Math.PI / 180 * (mreg - 90 - 6)) * 200;
        var la = Math.cos(Math.PI / 180 * (mreg - 90 - 6)) * 200;
        div888.style.left = la + 600 + 'px';
        div888.style.top = ta + 200 + "px";
        document.body.appendChild(div888);

        //在初始显示时针
        var div999 = document.createElement("div");
        div999.className = "box1";
        var ta = Math.sin(Math.PI / 180 * (hreg - 90 - 30)) * 200;
        var la = Math.cos(Math.PI / 180 * (hreg - 90 - 30)) * 200;
        div999.style.left = la + 600 + 'px';
        div999.style.top = ta + 200 + "px";
        document.body.appendChild(div999);


        //延时调用分针使得在0点处同步
        setTimeout(function () {
            console.log(1);
            div888.remove();
            clock(200, 6, 1000 * 60, mreg - 90, box2);
        }, dv * 1000)

        //延时调用时针使得在0点处同步
        setTimeout(function () {
            clock(200, 30, 1000 * 60 * 60, hreg - 90, box1);
        }, dv1 * 60 * 1000)
        function clock(r, speed, sec, reg, color) {
            var ces = sec;
            var ger = reg;
            var oDivss = document.createElement('div');
            oDivss.className = color;

            //获取div坐标
            var t = Math.sin(Math.PI / 180 * ger) * r;
            var l = Math.cos(Math.PI / 180 * ger) * r;
            oDivss.style.left = l + 600 + 'px';
            oDivss.style.top = t + 200 + "px";
            document.body.appendChild(oDivss);
            // return 0;

            //删除上一秒的div
            setTimeout(() => {
                oDivss.remove();
            }, ces);


            timeSecond = setInterval(() => {
                reg += speed;
                var oDivs = document.createElement('div');
                oDivs.className = color;
                //获取div坐标
                var t = Math.sin(Math.PI / 180 * reg) * r;
                var l = Math.cos(Math.PI / 180 * reg) * r;
                oDivs.style.left = l + 600 + 'px';
                oDivs.style.top = t + 200 + "px";
                document.body.appendChild(oDivs);
                // return 0;
                //删除上一秒的div

                setTimeout(() => {
                    oDivs.remove();
                }, sec);
            }, sec);
        }
        function gettimes(times) {
            if (times > 12) {
                return times - 12;
            } else {
                return times;
            }
        }
        function getClock() {
            for (var i = 0; i < oSpan.length; i++) {
                oSpan[i].style.positon = 'absolute';
                oSpan[i].style.left = Math.cos(Math.PI / 180 * (90 - 30 * [i])) * 205 + 200 - 5 + 'px';
                oSpan[i].style.top = Math.sin(Math.PI / 180 * (90 - 30 * [i])) * 205 + 200 - 5 + 'px';
            }
        }
    </script>
</body>

</html>```