运动的小球
Posted huangping199541
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了运动的小球相关的知识，希望对你有一定的参考价值。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type="text/css"> 7 #boxwidth: 500px;height: 500px;border: 1px solid black;position: relative; 8 #ballwidth: 20px;height: 20px;background-color: red;border-radius: 50%;position: absolute;left: 0;top: 0; 9 </style> 10 </head> 11 <body> 12 <div id="box"> 13 <div id="ball"> 14 15 </div> 16 </div> 17 <input type="button" name="btn" id="btn" value="启动" /> 18 </body> 19 <script type="text/javascript"> 20 //获取节点 21 var obox = document.querySelector("#box"); 22 var oball = document.querySelector("#ball"); 23 var obtn = document.querySelector("#btn"); 24 var speed = 10 ; 25 var topspeed = 0 ; 26 var t ; 27 obtn.onclick = function() 28 clearInterval(t); 29 t = setInterval(function() 30 31 if(oball.offsetLeft>480 ) 32 speed=-speed; 33 oball.style.left = oball.offsetLeft + speed + "px"; 34 35 else if (oball.offsetLeft<0 ) 36 speed=-speed; 37 oball.style.left = oball.offsetLeft + speed + "px"; 38 else 39 oball.style.left = oball.offsetLeft + speed + "px"; 40 41 42 43 if(oball.offsetTop>480 ) 44 topspeed=-topspeed; 45 oball.style.top = oball.offsetTop + topspeed + "px"; 46 47 else if (oball.offsetTop<0 ) 48 topspeed=-topspeed; 49 oball.style.top = oball.offsetTop + topspeed + "px"; 50 else 51 oball.style.top = oball.offsetTop + topspeed + "px"; 52 53 54 55 document.onkeydown = function(eve) 56 e=eve||window.event; 57 //左走 58 if(e.keyCode==37) 59 if(speed>0) 60 61 speed=-10; 62 63 else if(speed==0) 64 speed=-10; 65 topspeed=0; 66 67 68 //右走 69 if(e.keyCode==39) 70 if(speed<0) 71 speed=-speed; 72 73 else if(speed==0) 74 speed=10; 75 topspeed=0; 76 77 78 79 // 上走 80 if(e.keyCode==38) 81 if(topspeed>0) 82 topspeed=-10; 83 84 else if(topspeed==0) 85 topspeed=-10; 86 speed=0; 87 88 89 90 91 // 下走 92 if(e.keyCode==40) 93 if(topspeed<0) 94 topspeed=10; 95 96 else if(topspeed==0) 97 topspeed=10; 98 speed=0; 99 100 101 102 103 104 105 ,30) 106 107 108 </script> 109 </html>
以上是关于运动的小球的主要内容，如果未能解决你的问题，请参考以下文章