首页 > 代码库 > 重力感应的自制时钟
重力感应的自制时钟
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>智能社--http://www.zhinengshe.com</title> 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>
重力感应的自制时钟
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。