js时钟

最新推荐文章于 2022-10-01 23:19:21 发布

阳哥爱吃饭

最新推荐文章于 2022-10-01 23:19:21 发布

阅读量234

点赞数

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

本文链接：https://blog.csdn.net/zyp22343234/article/details/73757691

版权

javascript 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

<!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>