钟表来一个

作者：andy0012018.05.06来源：Web前端之家浏览：14366评论:0

关键词：钟表 JS CSS3

钟表来一个。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js+css3</title>
<style>
.sz{ background:#FC9; border-radius:50%; width:200px; height:200px; position:relative;}
.hours{ position:absolute; width:6px; height:40px; background-color:#000; left:97px; bottom:100px; transform-origin:bottom; -webkit-transform:rotate(0deg); -webkit-transform-origin:bottom;-moz-transform:rotate(0deg); -moz-transform-origin:bottom;-o-transform:rotate(0deg); -o-transform-origin:bottom;}
.minutes{ position:absolute; width:4px; height:50px; background-color:#6CF;left:98px; bottom:100px; transform-origin:bottom;-webkit-transform:rotate(0deg); -webkit-transform-origin:bottom;-moz-transform:rotate(0deg); -moz-transform-origin:bottom;-o-transform:rotate(0deg); -o-transform-origin:bottom;}
.seconds{ position:absolute; width:2px; height:70px; background-color:#F66;left:99px; bottom:100px; transform-origin:bottom;-webkit-transform:rotate(0deg); -webkit-transform-origin:bottom;-moz-transform:rotate(0deg); -moz-transform-origin:bottom;-o-transform:rotate(0deg); -o-transform-origin:bottom;}

.one{ height:20px; width:5px; position:absolute; background-color:#633; left:97.5px;}
.two{ height:20px; width:5px; position:absolute; background-color:#633; left:97.5px; top:180px;}
.three{ width:20px; height:5px; position:absolute; background-color:#633; left:0; top:97.5px;}
.four{ width:20px; height:5px; position:absolute; background-color:#633; left:180px; top:97.5px;}
</style>
</head>
<body>

<p id="pid"></p>

<div class="sz">

    <div class="szup">
           <div id="hours" class="hours"></div>
           <div id="minutes" class="minutes"></div>
           <div id="seconds" class="seconds"></div>
    </div>
    <div class="szdown">
          <div class="one"></div>
          <div class="two"></div>
          <div class="three"></div>
          <div class="four"></div>

    </div>

    </div>

</body>
</html>
<script>

     var colck=setInterval("Time()",100);

     function Time(){
     var mytime=new Date;
     var h=mytime.getHours();
     var m=mytime.getMinutes();
     var s=mytime.getSeconds();
     var m=math(m);
     var s=math(s);
     document.getElementById("pid").innerHTML=h+":"+m+":"+s;
     }

     function math(i){
         if(i<10){
             i="0"+i;
             }
         return i;

         }

    var yuanColck=setInterval("shizhen()",100);

       function shizhen(){
         var mytime=new Date;
         var h=mytime.getHours();
         var m=mytime.getMinutes();
         var s=mytime.getSeconds();
         var hh=document.getElementById("hours");
         var mm=document.getElementById("minutes");
         var ss=document.getElementById("seconds");

         var hds=hdeg(h,m);
         var mds=mdeg(m);
         var sds=mdeg(s);

         hh.style.transform='rotate(' + hds + 'deg)';  
         mm.style.transform='rotate(' + mds + 'deg)';
         ss.style.transform='rotate(' + sds + 'deg)';

                 hh.style.webkitTransform='rotate(' + hds + 'deg)';
                 mm.style.webkitTransform='rotate(' + mds + 'deg)';
                 ss.style.webkitTransform='rotate(' + sds + 'deg)';

                 hh.style.mozkitTransform='rotate(' + hds + 'deg)';
                 mm.style.mozkitTransform='rotate(' + mds + 'deg)';
                 ss.style.mozkitTransform='rotate(' + sds + 'deg)';

                 hh.style.oTransform='rotate(' + hds + 'deg)';
                 mm.style.oTransform='rotate(' + mds + 'deg)';
                 ss.style.oTransform='rotate(' + sds + 'deg)';
        }

        function hdeg(i,j){
            if(i<12){
                i=i
                }else{
                        i=i-12;
                        }
                i=i*30;
                j=(j/60)*30;
                return i+j;
            }

        function mdeg(i){
                    i=i*6;
               return i;
            }

</script>

赏您的支持是我们创作的动力！