Javascript的动态运动(1)
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> #div1 { width: 100px; height: 100px; background-color: red; } </style> <script type="text/javascript"> function StartMove() { //避免多定时器同时工作 clearInterval(timer); var oDiv = document.getElementById("div1"); timer = setInterval(function () { var speed = 10; if (oDiv.offsetLeft >= 300) { clearInterval(timer); } else { oDiv.style.left = oDiv.offsetLeft + speed + 'px'; } }, 30); } </script> </head> <body> <input type="button" id="btn" value="运动" onclick="StartMove()" /> <br /> <br /> <div id="div1"></div> </body> </html>