用原生js实现一个时钟

最新推荐文章于 2023-11-16 10:35:40 发布

一蓑烟雨，一任平生

最新推荐文章于 2023-11-16 10:35:40 发布

阅读量208

点赞数

文章标签： js html css3

本文链接：https://blog.csdn.net/m0_52952413/article/details/119855327

版权

用原生js实现一个时钟

在这里插入图片描述

下面上代码

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #clock {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -300px;
            margin-left: -300px;
            width: 600px;
            height: 600px;
            background-image: url("img/clockface.jpg");
        }
        /*同时对id=hour  id=minute  id=second  的三个元素设置一样的样式*/
        #hour,
        #minute,
        #second {
            position: absolute;
            top: 192px;
            left: 221px;
            transform: rotate(90deg);
        }
        #hour {
            width: 150px;
            height: 10px;
            border-radius: 10px;
            background-color: red;
            top: 300px;
            left: 150px;
            transform-origin: right bottom;
            transform: rotate(90deg);
        }
        #minute {
            width: 200px;
            height: 8px;
            border-radius: 10px;
            background-color: yellow;
            left: 100px;
            top: 299px;
            transform-origin: right bottom;
            transform: rotate(90deg);
        }
        #second {
            left: 70px;
            top: 300px;
            width: 230px;
            height: 5px;
            border-radius: 10px;
            background-color: black;
            transform-origin: right bottom;
        }
    </style>
</head>
<body>
    <div id="clock">
        <div id="hour"></div>
        <div id="minute"></div>
        <div id="second"></div>
    </div>
    <script>
        // 定时器功能：
        // 1.每秒按照当前的时分秒，讲对应的时分秒div旋转到指定角度
        // 1.1 获取当前的时分秒
        // 1.2 计算时分秒对应的度数
        // 1.3 修改对应的transform属性
        function circle() {
            var h = new Date().getHours();//时
            var m = new Date().getMinutes();// 分
            var s = new Date().getSeconds();// 秒
            console.log(m);
            var hour = 360 / 12;//每小时转的度数
            var min = 360 / 60;//每分钟转的度数
            var scond = 360 / 60;//每秒转的度数
            document.querySelector("#second").style.transform = `rotate(${scond * s + 90}deg)`;
            document.querySelector("#minute").style.transform = `rotate(${min * m + 90}deg)`;
            document.querySelector("#hour").style.transform = `rotate(${hour * h + 90}deg)`;
        }
        circle();
        // 执行定时器
        setInterval("circle()", 1000);
    </script>
</body>