<!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: green; position: absolute; left:600px; top: 50px; } #div2 { width:1px; height:300px; position:absolute; background-color:gray; left:300px; top:0px; } </style> </head> <script type="text/javascript"> var timer = null; function Move() { var oDiv = document.getElementById("div1"); timer = setInterval(function () { var speed = (300 - oDiv.offsetLeft) / 10; speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); oDiv.style.left = oDiv.offsetLeft + Math.ceil(speed) + "px"; }, 30); } </script> <body> <input type="button" id="btn" value="开始运动" onclick="Move()" /> <div id="div1"></div> <div id="div2"></div> </body> </html>