1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 list-style: none; 11 } 12 .clock{ 13 width:300px; 14 height:300px; 15 background: -webkit-radial-gradient(center center,circle, #eee,#666); 16 /*background: url(tick.png) no-repeat;*/ 17 background-size: cover; 18 border-radius: 50%; 19 position: absolute; 20 left: 100px; 21 top: 100px; 22 border: 1px solid #000; 23 box-shadow: 0px 0px 4px #000; 24 } 25 .cap{ 26 width: 20px; 27 height: 20px; 28 background: -webkit-radial-gradient(center center,circle,#ccc,#000); 29 position: absolute; 30 left: 50%; 31 top: 50%; 32 margin-top: -10px; 33 margin-left: -10px; 34 border-radius: 50%; 35 } 36 .hour{ 37 width:14px; 38 height:80px; 39 background: #000; 40 position: absolute; 41 left: 50%; 42 margin-left: -7px; 43 top: 50%; 44 margin-top: -80px; 45 border-radius: 50% 50% 0 0; 46 47 transform-origin: center bottom; 48 49 50 } 51 .min{ 52 width:10px; 53 height:100px; 54 background: #000; 55 56 position: absolute; 57 left: 50%; 58 margin-left: -5px; 59 top: 50%; 60 margin-top: -100px; 61 border-radius: 50% 50% 0 0; 62 63 transform-origin: center bottom; 64 65 } 66 .sec{ 67 width:4px; 68 height:120px; 69 background: #f00; 70 71 position: absolute; 72 left: 50%; 73 margin-left: -2px; 74 top: 50%; 75 margin-top: -120px; 76 border-radius: 50% 50% 0 0; 77 78 transform-origin: center bottom; 79 } 80 .scale{ 81 width:2px; 82 height:10px; 83 background: #000; 84 position: absolute; 85 left: 50%; 86 margin-left: -1px; 87 transform-origin: center 150px; 88 } 89 .bs{ 90 width:4px; 91 height:14px; 92 background: #000; 93 position: absolute; 94 left: 50%; 95 margin-left: -2px; 96 transform-origin: center 150px; 97 } 98 .bs strong{ 99 margin-top: 20px; 100 position: absolute; 101 font-size: 24px; 102 width:100px; 103 text-align: center; 104 left: 50%; 105 margin-left: -50px; 106 text-shadow: 1px 1px 3px #000; 107 } 108 </style> 109 <script> 110 window.onload=function(){ 111 var oDiv=document.querySelector('.clock'); 112 113 var oH=document.querySelector('.clock .hour'); 114 var oM=document.querySelector('.clock .min'); 115 var oS=document.querySelector('.clock .sec'); 116 117 //画刻度 118 var N=60; 119 for(var i=0; i<N; i++){ 120 var oSpan=document.createElement('span'); 121 122 if(i%5==0){ 123 oSpan.className='bs'; 124 125 var n=i/5==0?12:i/5; 126 127 oSpan.innerHTML='<strong>'+n+'</strong>'; 128 oSpan.children[0].style.transform='rotate('+-i*6+'deg)'; 129 }else{ 130 oSpan.className='scale'; 131 } 132 133 oSpan.style.transform='rotate('+6*i+'deg)'; 134 oDiv.appendChild(oSpan); 135 } 136 137 function tick(){ 138 var oDate=new Date(); 139 var h=oDate.getHours(); 140 var m=oDate.getMinutes(); 141 var s=oDate.getSeconds(); 142 var ms=oDate.getMilliseconds(); 143 144 oH.style.transform='rotate('+(h*30+m/60*30)+'deg)'; 145 oM.style.transform='rotate('+(m*6+s/60*6)+'deg)'; 146 oS.style.transform='rotate('+(s*6+ms/1000*6)+'deg)'; 147 } 148 tick(); 149 setInterval(tick,30); 150 151 //以下拖拽 152 var iSpeedX=0; 153 var iSpeedY=0; 154 155 var lastX=0; 156 var lastY=0; 157 158 var timer=null; 159 160 oDiv.onmousedown=function(ev){ 161 var oEvent=ev || event; 162 var disX=oEvent.clientX-oDiv.offsetLeft; 163 var disY=oEvent.clientY-oDiv.offsetTop; 164 165 clearInterval(timer); 166 167 document.onmousemove=function(ev){ 168 var oEvent=ev || event; 169 oDiv.style.left=oEvent.clientX-disX+'px'; 170 oDiv.style.top=oEvent.clientY-disY+'px'; 171 172 //计算速度 173 iSpeedX=oEvent.clientX-lastX; 174 iSpeedY=oEvent.clientY-lastY; 175 176 lastX=oEvent.clientX; 177 lastY=oEvent.clientY; 178 }; 179 180 document.onmouseup=function(){ 181 document.onmousemove=null; 182 document.onmouseup=null; 183 184 duangMove(); 185 }; 186 return false; 187 }; 188 189 function duangMove(){ 190 timer=setInterval(function(){ 191 iSpeedY+=3; 192 193 var l=oDiv.offsetLeft+iSpeedX; 194 var t=oDiv.offsetTop+iSpeedY; 195 196 if(t>=document.documentElement.clientHeight-oDiv.offsetHeight){ 197 t=document.documentElement.clientHeight-oDiv.offsetHeight; 198 iSpeedY*=-0.8; 199 iSpeedX*=0.8; 200 } 201 if(t<=0){ 202 t=0; 203 iSpeedY*=-0.8; 204 iSpeedX*=0.8; 205 } 206 if(l>=document.documentElement.clientWidth-oDiv.offsetWidth){ 207 l=document.documentElement.clientWidth-oDiv.offsetWidth; 208 iSpeedX*=-0.8; 209 iSpeedY*=0.8; 210 } 211 if(l<=0){ 212 l=0; 213 iSpeedX*=-0.8; 214 iSpeedY*=0.8; 215 } 216 217 oDiv.style.left=l+'px'; 218 oDiv.style.top=t+'px'; 219 220 if(Math.abs(iSpeedX)<1)iSpeedX=0; 221 if(Math.abs(iSpeedY)<1)iSpeedY=0; 222 223 if(iSpeedX==0 && iSpeedY==0 && t==document.documentElement.clientHeight-oDiv.offsetHeight){ 224 clearInterval(timer); 225 } 226 },30); 227 } 228 }; 229 </script> 230 </head> 231 <body> 232 <div class="clock"> 233 <div class="hour"></div> 234 <div class="min"></div> 235 <div class="sec"></div> 236 <div class="cap"></div> 237 </div> 238 </body> 239 </html>
