js时钟

来源：互联网发布：网络小游戏在线玩编辑：程序博客网时间：2024/05/27 20:58
<!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%;               background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#b8c4cb), to(#f6f6f8));/            }            /*这是60个刻度样式*/            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;            }          /*  这是整点的刻度点样式*/            span{                display: inline-block;                width: 10px;                height: 20px;                position: relative;                top: 15px;                left:-15px;                font-size: 18px;            }        </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');//       这是创建60个刻度点        for (var i=0;i<60;i++) {//          创建60个刻度的li节点            var li=document.createElement('li');//          这是整点添加数字             if(i%5==0){                var j=i/5;                var oPs=document.createElement('span');                 oPs.innerHTML=j;                 li.appendChild(oPs);//               添加12点             if( oPs.innerHTML==0){                  oPs.innerHTML=12;                   }//           这是设置3 6 9 12等数字变为红色；        if(j%3==0){            oPs.style.fontSize=24+'px';            oPs.style.color='red';         }             }//           在ul里面添加60个li节点            oUl.appendChild(li);        }//      获取到所有的li        var aLi=document.querySelectorAll('li');//     把60个li以圆心依次旋转6度        for (var k=0;k<60;k++) {            aLi[k].style.transform='rotate('+(k+1)*6+'deg)';        }//        获取到时针分针秒针        var hour=document.querySelector('.hour');        var second=document.querySelector('.second');        var minute=document.querySelector('.minute')//      这是一个定时器每隔一秒就启动time()这个函数;           setInterval(time,1000);            function time(){//         获取本地时间            var now=new Date();            var Second=now.getSeconds();            var Minute=now.getMinutes();            var Hour=now.getHours();  //把时针按照对应比例旋转(+Minute/60)加上一点分钟的时间时针就会时刻变化，不会显得突兀  hour.style.transform='rotate('+(Hour+Minute/60)*30+'deg)';   //把分针按照对应比例旋转+Minute/60加上一点秒钟的时间分针就会时刻变化，不会显得突兀   minute.style.transform='rotate('+(Minute+Second/60)*6+'deg)';    //把秒针按照对应比例旋转            second.style.transform='rotate('+(Second)*6+'deg)';        }//           最后自启这个函数不用等待一秒在启动，打开页面时钟就会动      time();    </script></html>
下面是效果图
这里写图片描述
阅读全文
0 0