快捷導(dǎo)航

又一款js時(shí)鐘!transform實(shí)現(xiàn)時(shí)鐘效果

更新時(shí)間：2016年08月15日 08:55:46 作者：小數(shù)點(diǎn)就是問(wèn)題

又一款js時(shí)鐘!這篇文章主要為大家詳細(xì)介紹了transform實(shí)現(xiàn)的時(shí)鐘效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

又來(lái)一個(gè)時(shí)鐘效果了，這個(gè)的實(shí)現(xiàn)不需要canvas，都是div、ul、li畫出的，好玩有真實(shí)。

哈哈~

需要的js才能實(shí)現(xiàn)到走動(dòng)這個(gè)效果，但js的內(nèi)容不多，也不難。
主要是一個(gè)css里transform的使用的思路，transform里有很多變幻屬性，而普通的時(shí)鐘
在我心中就是個(gè)圓圓的東西，那么是不是可以旋轉(zhuǎn)這個(gè)屬性（rotate）實(shí)現(xiàn)了，它的刻度
使用旋轉(zhuǎn)且把旋轉(zhuǎn)點(diǎn)設(shè)置在圓心，那不就可以繞著圓心轉(zhuǎn)了嗎，而時(shí)針?biāo)鼈兊牡撞坎皇呛?br /> 圓心接觸的嗎，那么設(shè)置時(shí)針的底部為旋轉(zhuǎn)點(diǎn)不就OK了，大概的說(shuō)了說(shuō)思路。

代碼：

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

使用標(biāo)簽畫圖最主要的是定位，因?yàn)檫@樣我們就可以把弄到形狀的盒子放到你所想要的位置，內(nèi)部css樣式表是可以使用獲取元素的方式獲取的，這樣就可以使用innerHTML為其添加樣式，且可以循環(huán)添加，還有因?yàn)榭潭忍嗨允褂醚h(huán)添加，這樣省時(shí)省力，至于剩下的就是定時(shí)器了，給定好1秒的時(shí)間，每1 秒執(zhí)行一次函數(shù)，這樣它就是動(dòng)起來(lái)了。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: