<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>碰撞运动</title> <style> #div1 { width:100px; height:100px; background:red; position:absolute; } </style> <script type="text/javascript"> window.onload = function(){ var oBtn = document.getElementById("btn"); oBtn.onclick = function(){ move(); } } var timer = null; var speedX = 6; var speedY = 8; function move(){ clearInterval(timer); timer = setInterval(function(){ var oDiv = document.getElementById("div1"); var l = oDiv.offsetLeft + speedX ; var t = oDiv.offsetTop + speedY; if(t >= document.documentElement.clientHeight-oDiv.offsetHeight) { speedY*=-1; t = document.documentElement.clientHeight - oDiv.offsetHeight; } else if(t<=0) { speedY*=-1; t=0; } if(l>=document.documentElement.clientWidth-oDiv.offsetWidth) { speedX*=-1; l = document.documentElement.clientWidth - oDiv.offsetWidth; } else if(l<=0) { speedX*=-1; l = 0; } oDiv.style.left = l+'px'; oDiv.style.top = t +'px'; },30); } </script> </head> <body> <input type="button" id="btn" value="运动" /> <div id="div1"> </div> <span style="1px;height:300px;background:black;left:300px"></span> </body> </html>