2D实现钟表效果

最新推荐文章于 2021-05-04 06:47:01 发布

tianshizhimeng155

最新推荐文章于 2021-05-04 06:47:01 发布

阅读量421

点赞数

分类专栏： css3

本文链接：https://blog.csdn.net/u013267266/article/details/51326156

版权

css3 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style id="css">
        #wrap{
            width:200px;height:200px;border:2px solid #000;margin:100px auto;border-radius:50%;position:relative;
        }
        #wrap ul{
            margin:0;padding:0;height:200px;position:relative;list-style:none;
        }
       #wrap ul li{
          width:2px;height:6px;background:#000;position:absolute;left:99px; top:0;-webkit-transform-origin: center 100px ;
        }
        #wrap ul li:nth-of-type(5n+1){height:12px;}
        #hour{width:6px;height:45px;background:#000;position:absolute;left:97px;top:55px; -webkit-transform-origin:bottom;}
         #min{width:4px;height:65px;background:#999;position:absolute;left:98px;top:35px;-webkit-transform-origin:bottom;}
         #sec{width:2px;height:80px;background:red;position:absolute;left:99px;top:20px;-webkit-transform-origin:bottom;}
         .ico{
            width:20px;height:20px;background:#000;position:absolute;left:90px;top:90px;border-radius:50%;
         }
        </style>
    </head>
    <body>
    <div id="wrap">
        <ul id="list">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <div id="hour"></div>
        <div id="min"></div>
        <div id="sec"></div>
        <div class="ico"></div>
    </div>

    <script>
      var oList=document.getElementById('list');
      var oCss=document.getElementById('css');
       var oHour=document.getElementById('hour');
        var oMin=document.getElementById('min');
         var oSec=document.getElementById('sec');
      var aLi="";
      var sCss="";
      for(var i=0;i<60;i++)
      {
        sCss+="#wrap ul li:nth-of-type("+(i+1)+"){-webkit-transform:rotate("+i*6+"deg);}";
        aLi+="<li></li>"
      }
      oList.innerHTML=aLi;
      oCss.innerHTML+=sCss;
      toTime();
      setInterval(toTime, 1000);
      function toTime(){
        var oDate=new Date();
        var iSec=oDate.getSeconds();
        var iMin=oDate.getMinutes()+iSec/60;
        var iHour=oDate.getHours()+iMin/60;
        oSec.style.WebkitTransform="rotate("+iSec*6+"deg)";
         oMin.style.WebkitTransform="rotate("+iMin*6+"deg)";
          oHour.style.WebkitTransform="rotate("+iHour*30+"deg)";
      }
    </script>
    </body>
</html>