css3++js钟表

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Document</title>
  6     <style>
  7     div{
  8         200px;
  9         height:200px;
 10         border-radius: 50%;
 11         border:1px solid #000;
 12         position: relative;
 13         margin:5px auto;
 14         text-align: center;
 15         box-shadow: 0px 0px 20px 5px #000;
 16     }
 17     div span{
 18         transform-origin: bottom center;
 19     }
 20     .sec{
 21         position: absolute;
 22         top:50%;
 23         left:50%;
 24         margin-left:-2px;
 25         margin-top:-80px;
 26         height:80px;
 27         4px;
 28         background: red;
 29         border-radius: 50% 50% 0 0;
 30     }
 31     .min{
 32         position: absolute;
 33         top:50%;
 34         left:50%;
 35         margin-left:-3px;
 36         margin-top:-60px;
 37         height:60px;
 38         6px;
 39         background: #000;
 40         border-radius: 50% 50% 0 0;
 41     }
 42     .hou{
 43         position: absolute;
 44         top:50%;
 45         left:50%;
 46         margin-left:-4px;
 47         margin-top:-40px;
 48         height:40px;
 49         8px;
 50         background: #000;
 51         border-radius: 50% 50% 0 0;
 52     }
 53     .cap{
 54         position: absolute;
 55         top:50%;
 56         left:50%;
 57         margin-left:-6px;
 58         margin-top:-6px;
 59         height:12px;
 60         12px;
 61         background: radial-gradient(#ccc,#999);
 62         border-radius: 50%;
 63     }
 64     i b{
 65         position: absolute;
 66         top:12px;
 67         left:-4px;
 68     }
 69     </style>
 70     <script>
 71     window.onload=function(){
 72         var aSpan=document.querySelectorAll('span');
 73         var oBox=document.getElementById('box');
 74         clock();
 75         setInterval(clock,30);
 76 
 77         for (var i = 0; i <60; i++) {
 78             var oI=document.createElement('i');
 79             oI.style.width='6px';
 80             if(i%5){
 81                 oI.style.height='8px';
 82             }else{
 83                 oI.innerHTML='<b>'+i/5+'</b>';
 84                 oI.children[0].style.transform='rotate(-'+i*6+'deg)';
 85                 oI.style.height='16px';
 86             }
 87             
 88             oI.style.position='absolute';
 89             oI.style.top='0px';
 90             oI.style.left='100px';
 91             oI.style.background='#000';
 92             oI.style.transform='rotate('+i*6+'deg)';
 93             oI.style.transformOrigin='0px 100px';
 94 
 95             oBox.appendChild(oI);
 96         }
 97         function clock(){
 98             var oDate=new Date();
 99             var h=oDate.getHours();
100             var m=oDate.getMinutes();
101             var s=oDate.getSeconds();
102             var ms=oDate.getMilliseconds();
103             
104             aSpan[2].style.transform='rotate('+(360*(h%12)/12+m*30/60)+'deg)';
105             aSpan[1].style.transform='rotate('+(360*m/60+s*6/60)+'deg)';
106             aSpan[0].style.transform='rotate('+(360*s/60+ms*6/1000)+'deg)';
107         }
108     };
109     </script>
110 </head>
111 <body>
112     <div id="box">
113         <span class="sec"></span>
114         <span class="min"></span>
115         <span class="hou"></span>
116         <p class="cap"></p>
117     </div>
118 </body>
119 </html>