transform实现的时钟效果

又来一个时钟效果了，这个的实现不需要canvas，都是p、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>
         p id="clock">
             ul>
    /ul>
             p id="hour">
    /p>
             p id="min">
    /p>
             p id="sec">
    /p>
             p id="dot">
    /p>
         /p>
         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;
    i60;
i++){
                 strLi+="li>
    /li>
    ";
         }
             oUl.innerHTML=strLi;
             for(var i=0;
    i60;
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

秒执行一次函数，这样它就是动起来了。

又来一个时钟效果了，这个的实现不需要canvas，都是p、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>
         p id="clock">
             ul>
    /ul>
             p id="hour">
    /p>
             p id="min">
    /p>
             p id="sec">
    /p>
             p id="dot">
    /p>
         /p>
         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;
    i60;
i++){
                 strLi+="li>
    /li>
    ";
         }
             oUl.innerHTML=strLi;
             for(var i=0;
    i60;
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

秒执行一次函数，这样它就是动起来了。

觉得可用，就经常来吧！ 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！