又一款js时钟!transform实现时钟效果

2019-11-20 09:14:54

字体：大中小

来源：转载

供稿：网友

又来一个时钟效果了，这个的实现不需要canvas，都是div、ul、li画出的，好玩有真实。

哈哈~

需要的js才能实现到走动这个效果，但js的内容不多，也不难。
主要是一个css里transform的使用的思路，transform里有很多变幻属性，而普通的时钟
在我心中就是个圆圆的东西，那么是不是可以旋转这个属性（rotate）实现了，它的刻度
使用旋转且把旋转点设置在圆心，那不就可以绕着圆心转了吗，而时针它们的底部不是和
圆心接触的吗，那么设置时针的底部为旋转点不就OK了，大概的说了说思路。

代码：

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>transform</title>  <style id="css">    #clock{      width: 200px;      height: 200px;      border: 2px solid #000;      border-radius: 50%;      margin: 100px auto 0;      position: relative;    }    #clock ul{      width: 200px;      height: 200px;      position: relative;      list-style: none;      padding:0;      margin: 0;    }    #clock ul li{      width: 2px;      height: 10px;      background: #000;      transform-origin: center 100px;      position: absolute;      top: 0;      left: 50%;    }    #clock ul li:nth-of-type(5n+1){      height: 20px;    }      #hour{      height: 40px;      width: 4px;      background: #00fefe;      position: absolute;      top: 60px;      left: 99px;      transform-origin:center bottom;    }    #min{      height: 60px;      width: 3px;      background: #001afe;      position: absolute;      top: 40px;      left: 99px;      transform-origin: center bottom;      transform: rotate(15deg);    }    #sec{      height: 70px;      width: 2px;      background: #000;      position: absolute;      top: 30px;      left: 99px;      transform-origin:center bottom;    }    #dot{      width: 10px;      height: 10px;      position: absolute;      left: 95px;      top: 95px;      background: #aaa;      border-radius: 50%;    }  </style></head><body>  <div id="clock">    <ul></ul>    <div id="hour"></div>    <div id="min"></div>    <div id="sec"></div>    <div id="dot"></div>  </div>  <script>    var oCss=document.getElementById("css");     var oClock=document.getElementById("clock");    var oUl=oClock.getElementsByTagName("ul")[0];    var oHour=document.getElementById("hour");    var oMin=document.getElementById("min");    var oSec=document.getElementById("sec");    var strLi="";    var strCss="";    for(var i=0;i<60;i++){      strLi+="<li></li>";    }    oUl.innerHTML=strLi;    for(var i=0;i<60;i++){      strCss+='#clock ul li:nth-of-type('+(i+1)+'){transform:rotate('+i*6+'deg);}';    }    oCss.innerHTML+=strCss;    time();    setInterval(time,1000);    function time(){    var date=new Date();    var h=date.getHours();    var m=date.getMinutes();    var s=date.getSeconds();    oHour.style.transform="rotate("+(h+m/60)*30+"deg)";    oMin.style.transform="rotate("+(m+s/60)*6+"deg)";    oSec.style.transform="rotate("+s*6+"deg)";    }  </script></body></html>

使用标签画图最主要的是定位，因为这样我们就可以把弄到形状的盒子放到你所想要的位置，内部css样式表是可以使用获取元素的方式获取的，这样就可以使用innerHTML为其添加样式，且可以循环添加，还有因为刻度太多所以使用循环添加，这样省时省力，至于剩下的就是定时器了，给定好1秒的时间，每1 秒执行一次函数，这样它就是动起来了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：浅谈toLowerCase和toLocaleLowerCase的区别

下一篇：最丑的时钟效果！js canvas时钟制作方法