CSS与JS结合完成时钟

最新推荐文章于 2024-06-24 23:43:02 发布

原创最新推荐文章于 2024-06-24 23:43:02 发布 · 414 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #html5

本文介绍如何利用HTML、CSS和JavaScript创建一个实时显示当前时间的动态时钟。时钟包括秒针、分针和时针，分别以秒、分和10分钟为单位进行转动。HTML构建时钟结构，CSS定义样式，JavaScript实现时钟的动态更新。通过设置定时器，秒针每秒转动6弧度，分针每分钟转动6弧度，时针每10分钟转动30弧度，实现逼真的时钟效果。

通过css与js结合完成时钟，这个时钟显示的是当前的时间，实现的效果是秒针每一秒走一格，即6弧度；分针每一分走一格，即6弧度；时针每10分钟走一格，即一小时旋转30弧度。

效果图如下：

1.Html部分：在html里面写出时钟结构，分别写出时钟的时针、分针和秒针。里面的ul是为了实现钟表上的秒针的指向，秒针每走过一个小方格就是一秒。代码如下：

<div id="time">
        <ul>

        </ul>
        <div id="hour"></div>
        <div id="minu"></div>
        <div id="seco"></div>
        <div id="ball"></div>
    </div>

2.css部分，实现时钟的基本样式，代码如下：

* {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        #time {
            width: 300px;
            height: 300px;
            border: 5px black solid;
            margin: 30px auto;
            border-radius: 50%;
            position: relative;
        }

        #time ul {
            width: 100%;
            height: 100%;
            position: relative;
        }

        #time ul li {
            width: 2px;
            height: 8px;
            background: black;
            position: absolute;
            left: 50%;
            top: 0;
            transform-origin: center 150px;
        }

        #hour {
            width: 6px;
            height: 50px;
            background: black;
            position: absolute;
            left: 50%;
            top: 50%;
            margin: -50px 0 0 -3px;
            transform-origin: center bottom;
        }

        #minu {
            width: 4px;
            height: 80px;
            background: black;
            position: absolute;
            left: 50%;
            top: 50%;
            margin: -80px 0 0 -2px;
            transform-origin: center bottom;
        }

        #seco {
            width: 2px;
            height: 120px;
            background: black;
            position: absolute;
            left: 50%;
            top: 50%;
            margin: -120px 0 0 -1px;
            transform-origin: center bottom;
        }

        #ball {
            width: 20px;
            height: 20px;
            background: blue;
            position: absolute;
            left: 50%;
            top: 50%;
            margin: -10px;
            border-radius: 50%;
        }

3.js部分，实现时钟的具体运动，秒针每一秒走一格，即6弧度；分针每一分走一格，即6弧度；时针每10分钟走一格，即一小时旋转30弧度。代码如下：

        //获取节点
        var ul = document.querySelector('ul');
        var hour = document.querySelector('#hour');
        var minu = document.querySelector('#minu');
        var seco = document.querySelector('#seco');

        for (var i = 0; i < 60; i++) {
            //创建li节点
            var li = document.createElement('li');
            //在时钟周围没隔1弧度安插一个li。
            li.style.transform = 'rotate(' + (i * 6) + 'deg)';

            if (i % 5 === 0) {
                li.style.height = '15px';
            }
            //将创建的li节点追加到ul中，显示到页面上
            ul.appendChild(li);
        }

        run();
        //设置定时器
        setInterval(run, 1000);
        //封装函数
        function run() {
            //获取当前时间
            var date = new Date();
            //获取时，分，秒
            var iH = date.getHours();
            var iM = date.getMinutes();
            var iS = date.getSeconds()
            //给时针、分针和秒针赋值
            hour.style.transform = 'rotate(' + (iH * 30 + iM / 2) + 'deg)';
            minu.style.transform = 'rotate(' + (iM * 6) + 'deg)';
            seco.style.transform = 'rotate(' + (iS * 6) + 'deg)';

        }