h5简写时钟效果

最新推荐文章于 2023-07-26 16:00:48 发布

weixin_30305735

最新推荐文章于 2023-07-26 16:00:48 发布

阅读量83

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/candyy/p/6110498.html

版权

会有两种时钟代码,第一种写法比较复杂,菜鸟写法,第二种比较简单

第一种:

<!DOCTYPE html>
<html>
<head>
   <title></title>
   <meta charset='utf-8'>
   <style type="text/css">
     #wrap{
        width: 220px;
        height: 220px;
        border: 3px solid pink;
        border-radius: 50%;
        margin: 100px auto;
        position: relative;
        background: url(img/0000.jpg);
        background-size: 100% 100%;
        box-shadow: inset 1px 1px 5px rgba(0,0,0,0.5);

     }
     #wrap1{
        width: 200px;
        height: 200px;
        border: 3px solid pink;
        border-radius: 50%;
        position: absolute;
        left: 8px;top: 8px;

        transform-style: preserve-3d;
     }
     span{font-size: 30px;color: yellow;}
     .span12{
        position: absolute;
        left: 85px;top: 6px;
     }
     .span1{
        position: absolute;
        right: 50px;top: 20px;
     }
     .span2{
        position: absolute;
        right: 20px; top:50px;
     }
     .span3{
        position: absolute;
        right: 10px; top:90px;
     }
     .span4{
        position: absolute;
        right: 20px;top:130px;
     }
     .span5{
        position: absolute;
        right: 40px;bottom:15px;
     }
     .span6{
        position: absolute;
        right: 90px;bottom: 0px;
     }
     .span7{
        position: absolute;
        left: 50px;bottom: 15px;
     }
     .span8{
        position: absolute;
        left: 20px;bottom: 45px;
     }
     .span9{
        position: absolute;
        left: 10px;top:95px;
     }
     .span10{
        position: absolute;
        left: 15px;top:55px;
     }
     .span11{
        position: absolute;
        left: 40px;top: 20px;
     }
     #dian{
        width: 15px;
        height: 15px;
        border: 1px solid #333;
        border-radius: 50%;
        background: #333;
        position: absolute;
        left: 50%;top: 50%;
        transform:translate(-50%,-50%);
     }
     #dian1{
        width: 8px;
        height: 8px;
        border: 1px solid #333;
        border-radius: 50%;
        background: #fff;
        position: absolute;
        left: 50%;top: 50%;
        transform:translate(-50%,-50%);
        z-index: 222;
     }
     #hour{
       width:5px;height: 60px;
        background: red;position: absolute;
        left: 50%;top: -40px;
        transform:translate(-50%,0);
        transform-origin:50% 48px;
     }
     #min{
        width: 3px;height: 75px;
        background: green;position: absolute;
        left: 50%; top: -55px;
        transform:translate(-50%,0);
        transform-origin:50% 64px;
     }
     #second{
        width: 2px;height: 85px;
        background: blue;position: absolute;
        left: 50%; top:-70px ;
        transform:translate(-50%,0);
        transform-origin:50% 80px;
     }

   </style>
</head>
<body>
     <div id="wrap">
        <div id="wrap1">
            <span class='span12'>12</span>
            <span class="span1">1</span>
            <span class="span2">2</span>
            <span class="span3">3</span>
            <span class="span4">4</span>
            <span class="span5">5</span>
            <span class="span6">6</span>
            <span class="span7">7</span>
            <span class="span8">8</span>
            <span class="span9">9</span>
            <span class="span10">10</span>
            <span class="span11">11</span>
            <div id="dian">
                <div id="dian1"></div>
                <div id="hour"></div>
                <div id="min"></div>
                <div id="second"></div>
            </div>
        </div>
     </div>
     <script type="text/javascript">
      //获取秒针元素
      var secondD = document.getElementById('second');
      var hourD = document.getElementById('hour');
      var minD = document.getElementById('min');

      function setTime(){
          //获取日期
          var date = new Date();
          //获取秒针
          var second = date.getSeconds();
          //获取分针
          var min = date.getMinutes();
          //获取小时
          var hour = date.getHours();
           hourD.style.transform = 'rotate('+(hour*30+min/2)+'deg)';
           minD.style.transform = 'rotate('+(min*6)+'deg)';
           secondD.style.transform = 'rotate('+(second*6)+'deg)';
}
      setTime();
      //刷新获取时间
      setInterval(setTime ,1000);
     </script>
</body>
</html>

第二种写法

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style type="text/css">

           /*初始化标签*/
           body {background: #ccc;}
           ul {margin: 0; padding: 0;}
           li {list-style: none;}

           #box {
               width: 500px;
               height: 500px;
               border-radius: 50%;
               background: -webkit-linear-gradient(#eee 1%,#999 8%,#999 95%,#eee);
               position: relative;
               margin: 100px auto;
               box-shadow: 1px 1px 25px #000;
           }
           #clock {
               width: 460px;
               height: 460px;
               border-radius: 50%;
               position: absolute;
               margin: auto;
               left: 0;top: 0;right: 0;bottom: 0;
               box-shadow: inset 1px 1px 15px #333;
           }
           .number {
               height: 100%;
               border-radius: 50%;
           }
           .number li {
               width: 100%;
               height: 50px;
               position: absolute;
               margin: auto;
               left: 0;top: 0;right: 0;bottom: 0;
               padding: 10px;
               box-sizing: border-box;
           }
           .number : first-child {
               transform: rotate(30deg);
           }
           .number span {
               font-size: 50px;
               display: inline-block;
               color: white;
           }

           /*布局指针*/
           .pointer {
               width: 30px;
               height: 30px;
               border-radius: 50%;
               background: #333;
               position: absolute;
               margin: auto;
               left: 0;top: 0;right: 0;bottom: 0;
           }
           .pointer li {
               position: absolute;
               left: 50%; top: 50%;
               transform-origin: left center;
           }
           .pointer .hour{
          width: 120px;
          height: 10px;
          background: firebrick;
          margin-top: -5px;
       }

       /* 指针的细节处理 */
       .hour div{
          height: 100%;
          background: firebrick;
          margin-left: -20px;
       }

       .pointer .minutes{
          width: 160px;
          height: 6px;
          background: darkolivegreen;
          margin-top: -3px;
       }
       /* 指针的细节处理 */
       .minutes div{
          height: 100%;
          background: darkolivegreen;
          margin-left: -20px;
       }

       .pointer .second{
          width: 200px;
          height: 2px;
          background: darkred;
          margin-top: -1px;
          transform: rotate(40deg);
       }
       /* 指针的细节处理 */
       .second div{
          height: 100%;
          background: darkred;
          margin-left: -20px;
       }

       /* 最后的细节打磨,处理指针固定点 */
       .pointer .dot{
           width: 15px;
           height: 15px;
           background: #fff;
           border-radius: 50%;
           position: absolute;
           margin: auto;
           left: 0;top: 0;right: 0;bottom: 0;
       }
       </style>
   </head>
   <body>
       <div id="box">
           <div id="clock">
               <ul class="number">
                   <li><span>9</span></li>
                   <li><span>10</span></li>
                   <li><span>11</span></li>
                   <li><span>12</span></li>
                   <li><span>1</span></li>
                   <li><span>2</span></li>
                   <li><span>3</span></li>
                   <li><span>4</span></li>
                   <li><span>5</span></li>
                   <li><span>6</span></li>
                   <li><span>7</span></li>
                   <li><span>8</span></li>
                </ul>

                
                <ul class="pointer">
                        <li class="hour">
                           <div></div>
                        </li>
                        <li class="minutes">
                           <div></div>
                        </li>
                        <li class="second">
                           <div></div>
                        </li>
                        
                        <li class="dot"></li>
                </ul>
           </div>
       </div>
   </body>

   <script type="text/javascript">

       var oNumber = document.querySelector('.number');
       var numLi = oNumber.querySelectorAll('li');

       //获取指针元素
       var oPointer = document.querySelector('.pointer');
       var hour = document.querySelector('.hour');
       var minutes = document.querySelector('.minutes');
       var second = document.querySelector('.second');

       // 3.将获取到的元素进行排兵布阵
        for(var i=0; i<numLi.length; i++){
            var oSpan = numLi[i].querySelector('span');
            numLi[i].style.transform = "rotate("+i*30+"deg)";
            oSpan.style.transform = "rotate("+-i*30+"deg)";
        }

        // 获取当前时间，让指针动起来
        setTime();
        setInterval(setTime, 1000);

        function setTime () {
               var oDate = new Date();
               var h = oDate.getHours();
               var m = oDate.getMinutes();
               var s = oDate.getSeconds();

               hour.style.transform = 'rotate('+((h*30+m/2)-90)+'deg)';
               minutes.style.transform = 'rotate('+(m*6-90)+'deg)';
               second.style.transform = 'rotate('+(s*6-90)+'deg)';
        }

   </script>
</html>

转载于:https://www.cnblogs.com/candyy/p/6110498.html

weixin_30305735

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
h5简写时钟效果

会有两种时钟代码,第一种写法比较复杂,菜鸟写法,第二种比较简单第一种:<!DOCTYPE html><html><head> <title></title> <meta charset='utf-8'> <style type="text/css"> #wrap{ ...
复制链接

扫一扫