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>