js实现时钟转动

东方青云、

已于 2023-04-21 15:28:51 修改

阅读量1k

点赞数 6

分类专栏：综合案例 JS笔记文章标签： javascript css 前端

于 2023-04-17 13:30:40 首次发布

本文链接：https://blog.csdn.net/Zhang_wang_yun/article/details/130197893

版权

JS笔记同时被 2 个专栏收录

20 篇文章 5 订阅

订阅专栏

综合案例

14 篇文章 7 订阅

订阅专栏

文章目录

1、实现效果
2、实现原理
3、实现代码
4、总结

1、实现效果

在这里插入图片描述

2、实现原理

我们有四张图片，clock为表盘，hour、minute、second为钟针，四个图片采取定位的方式定在一起；
表盘使用 position: relative;限制里面子级的定位位置，三个钟针使用 position: absolute;定位在表盘里面。
声明一个间歇函数来让时钟每秒自动转动，在里面声明三个变量来定义 transform: rotate();，规定三个钟针旋转多少度。

在这里插入图片描述

3、实现代码

<!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>网页时钟</title>
    <style>
        * {
            box-sizing: border-box;
        }

        .clock {
            width: 600px;
            height: 600px;
            background: url(./images/clock.jpg) no-repeat;
            margin: 50px auto 0;
            position: relative;
        }

        .hh,
        .mm,
        .ss {
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            background: url(./images/hour.png) no-repeat center;
        }

        .mm {
            background-image: url(./images/minute.png);
            transform: rotate(270deg);
        }

        .ss {
            background-image: url(./images/second.png);
            transform: rotate(0deg);
        }
    </style>
</head>

<body>
    <div class="clock">
        <div class="hh" id="h"></div>
        <div class="mm" id="m"></div>
        <div class="ss" id="s"></div>
    </div>
    <script>
        // 获取元素秒
        const second = document.querySelector('.ss')
        // 获取元素分
        const minute = document.querySelector('.mm')
        // 获取元素时
        const hour = document.querySelector('.hh')
        // 定义秒变量
        let s = 0;
        // 定义分变量
        let m = 270
        // 定义时变量
        let h = 0
        // 定义一个间歇函数，让时钟自己转动
        let seconds = setInterval(function () {
            // 一个圆是360°，所以我们一秒应该转动6°
            s += 6
            // 如果大于等于360，s赋值为0，重新开始
            //过了60秒我们应该让分变量进一位，同样是6°
            if (s >= 360) {
                s = 0
                m += 6
            }
            // 如果大于等于360，m赋值为0，重新开始
            //过了60秒我们应该让时变量进一位，因为一天是12小时，所以360°/12为30°
            if (m >= 360) {
                m = 0
                h += 30
            }
             // 如果大于等于360，h赋值为0，重新开始
            if (h >= 360) {
                h = 0
            }
            // 给对应的时分秒改变rotate旋转度数。
            second.style.transform = `rotate(${s}deg)`
            minute.style.transform = `rotate(${m}deg)`
            hour.style.transform = `rotate(${h}deg)`
        }, 1000)
    </script>
</body>

</html>