js做时钟手表，时刻准点

最新推荐文章于 2023-01-18 01:07:27 发布

石界星空

最新推荐文章于 2023-01-18 01:07:27 发布

阅读量1.4k

点赞数 1

分类专栏： js 文章标签： javascript

本文链接：https://blog.csdn.net/stone10086/article/details/72773250

版权

js 专栏收录该内容

69 篇文章 0 订阅

订阅专栏

效果图

这里写图片描述

中心思想：
1、布局，利用js添加表盘刻度；
2、利用nth-of-type（5n）来设置时针的刻度；
3、获取当前的时分秒，利用时分秒来得到指针的转动度数；
4、设置定时器1s刷新时分秒数，就可以获取转动的表盘指针了；

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
                list-style: none;
            }
            .box{
                width: 200px;
                height: 200px;
                border: 1px solid #000;
                border-radius: 50%;
                margin: 100px auto;
                position: relative;
            }
            ul{
                width: 200px;
                height: 200px;
                border-radius: 50%;
            }
            ul li{
                width: 2px;
                height: 6px;
                background: #000;
                position: absolute;
                top: 0;
                left: 98px;
                -webkit-transform-origin: center 100px;
            }
            li:nth-of-type(5n){
                height: 15px;
            }
            .hour{
                width: 3px;
                height: 70px;
                background: #000;
                position: absolute;
                top: 50px;
                left: 97px;
                -webkit-transform-origin: 1.5px 50px;
            }
            .minute{
                width: 2px;
                height: 80px;
                background: #000;
                position: absolute;
                top: 40px;
                left: 97.5px;
                -webkit-transform-origin: 1px 60px;
            }
            .second{
                width: 1px;
                height: 90px;
                background: #000;
                position: absolute;
                top: 30px;
                left: 98px;
                -webkit-transform-origin: 0.5px 70px;
            }

        </style>
    </head>
    <body>
        <div class="box">
            <ul>
                <!--<li></li>-->
            </ul>
            <div class="hour"></div>
            <div class="minute"></div>
            <div class="second"></div>
        </div>
    </body>
    <script type="text/javascript">
        var oUl=document.querySelector('ul');
        for (var i=0;i<60;i++) {
            var li=document.createElement('li');
            oUl.appendChild(li);
        }
        var aLi=document.querySelectorAll('li');
        for (var k=0;k<60;k++) {
            aLi[k].style.transform='rotate('+(k+1)*6+'deg)';
//          if ((k+1)%5==0) {
//              aLi[k].style.height='15px';
//          }
        }

        var hour=document.querySelector('.hour');
        var second=document.querySelector('.second');
        var minute=document.querySelector('.minute')

        setInterval(function(){
            var now=new Date();
            var Second=now.getSeconds();
            var Minute=now.getMinutes();
            var Hour=now.getHours();

            hour.style.transform='rotate('+(Hour+Minute/60)*30+'deg)';
            minute.style.transform='rotate('+(Minute+Second/60)*6+'deg)';
            second.style.transform='rotate('+(Second)*6+'deg)';
        },1000)



    </script>
</html>

石界星空

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js做时钟手表，时刻准点

效果图中心思想： 1、布局，利用js添加表盘刻度； 2、利用nth-of-type（5n）来设置时针的刻度； 3、获取当前的时分秒，利用时分秒来得到指针的转动度数； 4、设置定时器1s刷新时分秒数，就可以获取转动的表盘指针了；<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></ti
复制链接

扫一扫