js 计时器实现钟表

最新推荐文章于 2022-10-07 22:19:45 发布

Lemon

最新推荐文章于 2022-10-07 22:19:45 发布

阅读量1.1k

点赞数 2

分类专栏：学习

本文链接：https://blog.csdn.net/weixin_43314846/article/details/99588950

版权

学习专栏收录该内容

80 篇文章 0 订阅

订阅专栏

下述案列的几点注意事项：
当给时钟的时针、分针和秒针设置旋转动画时就会出现：从59s向60s移动时会逆向旋转到达，而不是顺时针到达。解决：去除旋转动画
为了让时针随着分针和秒针（其余相同），需要将当前分钟和秒也转换成时，从而转换成对应的角度

最后效果：

在这里插入图片描述

钟表案例

功能：分针和时针可随着秒针的移动而移动。用计时器和Date内置对象实现钟表。

思想：利用新建Date实例获取当前时间。再利用Date的相关方法获取当前时间的时分秒。再根据一小时30deg/一分钟6deg/一秒钟6deg来计算当前时间对应的时针、分针、秒针对应的角度，从而实现一个完整的钟表。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .all{
            height: 300px;
            width: 300px;
            margin: auto;
            position: relative;
        }
        .clock{
            height: 200px;
            margin: auto;
        }
        .hour,.minute,.second{
            width: 70px;
            position: absolute;
            transform: rotate(90deg);
            /*不加动画可以正常转圈*/
            /*transition: transform .2s linear;*/
        }

        .hour{
            top:84px;
            left:59px;
            transform-origin:68% 47%;
        }
        .minute{
            top:82px;
            left:46px;
            transform-origin:88% 60%;
        }
        .second{
            top:86.6px;
            left:38px;
            transform-origin:98.8% 47%;
        }
    </style>
</head>
<body>
    <div class="all">
        <img class="clock" src="img/bgimageclock.png">
        <img class="hour" src="img/bgimagehour.png"/>
        <img class="minute" src="img/bgimageminute.png"/>
        <img class="second" src="img/bgimagesecond.png">
    </div>
<script>
    var hourele = document.getElementsByClassName("hour")[0];
    var minuteele = document.getElementsByClassName("minute")[0];
    var secondele = document.getElementsByClassName("second")[0];
    window.onload = function (ev) {
        function rotate(){
            var date = new Date();
            var hour = date.getHours();
            var minute = date.getMinutes();
            var second = date.getSeconds();
            var secondRotate=(90+second*6);
            //分别设置时针、分针、秒针的旋转角度
            var hourRotate = (90+hour*30+minute/60*30+second/3600*30);
            var minuteRotate = (90+minute*6+second/60*6);
            secondele.style.transform = "rotate("+secondRotate+"deg)";
            hourele.style.transform = "rotate("+hourRotate+"deg)";
            minuteele.style.transform = "rotate("+minuteRotate+"deg)";
        }
        setInterval(rotate,1000);
        rotate();
    }
</script>
</body>
</html>

最后再附上找到的一个自己认为比较好的实现时钟的文章（作者是用代码画的时钟和针）：https://www.cnblogs.com/widows/p/6824764.html

Lemon

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
js 计时器实现钟表

下述案列的几点注意事项：当给时钟的时针、分针和秒针设置旋转动画时就会出现：从59s向60s移动时会逆向旋转到达，而不是顺时针到达。解决：去除旋转动画为了让时针随着分针和秒针（其余相同），需要将当前分钟和秒也转换成时，从而转换成对应的角度最后效果：钟表案例功能：分针和时针可随着秒针的移动而移动。用计时器和Date内置对象实现钟表。思想：利用新建Date实例获取当前时间。再利...
复制链接

扫一扫