JS及CSS3实现钟表效果

最新推荐文章于 2020-08-30 17:28:10 发布

吞石鱼

最新推荐文章于 2020-08-30 17:28:10 发布

阅读量359

点赞数 1

本文链接：https://blog.csdn.net/qq_38735649/article/details/81741496

版权

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #wrap{
                width: 300px;
                height: 300px;
                background-color: aliceblue;
                margin: 200px auto;
                position: relative;
                box-sizing: border-box;
            }
            #wrap > div{
                position: absolute;
                top: 50%;
                left: 50%;
            }
            #hour{
                width: 6px;
                height: 60px;
                background-color: #000000;
                margin: -60px -3px;
                transform-origin: 3px 60px;
            }
            #min{
                width: 4px;
                height: 80px;
                background-color: #000000;
                margin: -80px -2px;
                transform-origin: 2px 80px;
            }
            #sec{
                width: 2px;
                height: 100px;
                background-color: red;
                margin: -100px -1px;
                transform-origin: 1px 100px;
            }
            #point{
                width: 20px;
                height: 20px;
                background-color: burlywood;
                margin: -10px -10px;
                border-radius: 50%;
            }
            #circle{
                width: 300px;
                height: 300px;
                position: relative;

            }
            #circle li{
                list-style: none;
                width: 2px;
                height: 6px;
                background-color: #000000;
                position: absolute;
                transform-origin: 1px 150px;
                left: 149px;
                top: 0px;
            }

        </style>
    </head>
    <body>
        <div id="wrap">
            <div id="hour"></div>
            <div id="min"></div>
            <div id="sec"></div>
            <div id="point"></div>
            <ul id="circle"></ul>
        </div>
    </body>
    <script type="text/javascript">
        var hourDom=document.getElementById('hour');
        var minDom=document.getElementById('min');
        var secDom=document.getElementById('sec');
        var cricle=document.getElementById('circle');
        //创建表盘，ul宽高为wrap宽高，以wrap中心点为变换基点，动态分配6°的li
        for (var i=0;i<60;i++) {
            var li=document.createElement('li');
            cricle.appendChild(li);
            li.style.transform='rotate('+i*6+'deg)';
        }

        //延时函数，确保每一秒更新一次最新时间。并且计算时间准确值。
        setInterval(function(){
        var date=new Date();
        var hour=date.getHours();
        var min=date.getMinutes();
        var sec=date.getSeconds();
        min+=sec/60;
        hour+=min/60;

        //当前时间*每个单位时间走的角度=指针指向
        hourDom.style.transform='rotate('+hour*30+'deg)';
        minDom.style.transform='rotate('+min*6+'deg)';
        secDom.style.transform='rotate('+sec*6+'deg)';


        },1000)




    </script>
</html>

吞石鱼

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS及CSS3实现钟表效果

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; *{
复制链接

扫一扫