<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#div1{height: 200px;width: 200px;background: red;position: absolute;top: 50px;left: 0px;}
#div2{height: 600px;width: 1px;background: black;position: absolute;left: 300px;}
</style>
<script>
window.onclick = function(){
startMove();
}
function startMove(){
var oDiv = document.getElementById("div1");
var oBtn = document.getElementById("btn1");
oBtn.onclick = function(){
setInterval(function(){
var speed = (300 - oDiv.offsetLeft)/10;
speed = speed>0?Math.ceil(speed):Math.floor(speed); //向上取整，向下取整
oDiv.style.left = oDiv.offsetLeft + speed + 'px';
},30);
}
}
</script>
</head>
<body>
<input id = "btn1" type = "button" value="开始运动"/>
<div id = "div1"></div>
<div id = "div2"></div>
</body>
</html>
