(利用JS制作de时钟)

最新推荐文章于 2021-11-01 18:39:44 发布

码农5286289

最新推荐文章于 2021-11-01 18:39:44 发布

阅读量164

点赞数

分类专栏：代码时钟制作 html 文章标签： javascript html css

本文链接：https://blog.csdn.net/qq_40962935/article/details/116761737

版权

代码同时被 3 个专栏收录

1 篇文章 0 订阅

订阅专栏

时钟制作

1 篇文章 0 订阅

订阅专栏

html

1 篇文章 0 订阅

订阅专栏

利用JS制作的时钟

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <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: pink;
            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: 100px;
            border-radius: 50%;
            background-color: blueviolet;
            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');
        times = '';
        getClock();
        var date = new Date();
        //console.log(date);
        var hour = gettimes(date.getHours()) + 1;
        var minute = date.getMinutes() + 1;
        var second = date.getSeconds();
        // console.log(hour, minute, second);
        //一秒钟用6度角，一分钟用6度角，一小时用30度角表示
        var reg = 0;
        var hourReg = hour * 30;
        var minuteReg = minute * 6;
        var secondReg = second * 6;
        console.log(hourReg,minuteReg,secondReg);

        //设置秒针，分针，时针的样式
        var box1 = 'box1';
        var box2 = 'box2';
        var box3 = 'box3';
        //设置秒针
        clock(200, 6, 1000, secondReg - 90, box3);

        //设置分和时分别与秒的差值
        var minuteDiff = 60 - parseInt(second);
        var hourDiff = 60 - parseInt(minute);
        //在初始显示分针
        needle(minuteReg - 90 - 6, 200, 'box2');
        //在初始显示时针
        needle(hourReg - 90 - 30, 200, 'box1');

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

        //延时调用时针使得在0点处同步
        setTimeout(function () {
            // box1.remove();
            clock(200, 30, 1000 * 60 * 60, hourReg - 90, box1);
        }, hourDiff * 60 * 1000)
        //创建时钟秒分时针函数
        function needle(reg, r, color) {
            var oDivs = document.createElement('div');
            oDivs.className = color;
            //获取div坐标
            var cTop = Math.sin(Math.PI / 180 * reg) * r;
            var cLeft = Math.cos(Math.PI / 180 * reg) * r;
            oDivs.style.left = cLeft + 600 + 'px';
            oDivs.style.top = cTop + 300 + "px";
            document.body.appendChild(oDivs);
            return oDivs.className 
        }
        //时钟函数
        function clock(r, speed, sec, reg, color) {
            //创建时钟针节点
            var oDivs = document.createElement('div');
            oDivs.className = color;
            //时钟针的位置
            var cTop = Math.sin(Math.PI / 180 * reg) * r;
            var cLeft = Math.cos(Math.PI / 180 * reg) * r;
            oDivs.style.left = cLeft + 600 + 'px';
            oDivs.style.top = cTop + 300 + 'px';

            setTimeout(() => {
                oDivs.remove();
            }, sec);

            //定时器设置
            times = setInterval(() => {
                reg += speed;
                // needle(reg, r,color);
                var oDivs = document.createElement('div');
                oDivs.className = color;
                //获取div坐标
                var cTop = Math.sin(Math.PI / 180 * reg) * r;
                var cLeft = Math.cos(Math.PI / 180 * reg) * r;
                oDivs.style.left = cLeft + 600 + 'px';
                oDivs.style.top = cTop + 300 + "px";
                document.body.appendChild(oDivs);
                // return 0;
                //删除上一秒的div
                setTimeout(() => {
                    oDivs.remove();
                }, sec);
            }, sec)


        }
        //将时间改为12小时制
        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])) * 195 + 200 - 5 + 'px';
                oSpan[i].style.top = Math.sin(Math.PI / 180 * (90 - 30 * [i])) * 195 + 200 - 11 + 'px';
            }
        }
    </script>
</body>

</html>

[点击并拖拽以移动]

码农5286289

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
(利用JS制作de时钟)

利用JS制作de时钟<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <
复制链接

扫一扫