一、实现原理：
1、开定时器前先清除定时器
2、设置定时器
3、当前元素的位置 + 每一步的长度
4、当元素当前位置超过目标点时，把当前位置==目标点
5、设置元素位置，开始运动
6、判断当前位置如果到达目标点，则清除定时器
二、代码
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{ margin:0;padding: 0;}
div{position: absolute; width: 100px; height: 100px; background: red; left: 0;top: 100px;}
</style>
</head>
<body>
<button id="btn">开始</button>
<div id="box"></div> <script type="text/javascript">
window.onload = function(){
var btn = document.getElementById('btn');
var box = document.getElementById('box');
var speed; btn.onclick = function(){
// 1、开定时器前先清除定时器
clearInterval(box.timer);
// 2、设置定时器
box.timer = setInterval(function(){
// 3、当前元素的位置 + 每一步的长度
speed = box.offsetLeft + 11;
// 4、当元素当前位置超过目标点时，把当前位置==目标点
speed > 800 ? speed = 800 : null;
// 5、设置元素位置，开始运动
box.style.left = speed +'px';
// 6、判断当前位置如果到达目标点，则清除定时器
if(speed == 800){
clearInterval(box.timer);
} },20)
}
}
</script>
</body>
</html>