1、简单的匀速运动
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
*{
padding : 0;
margin : 0
}
button{
width : 80px;
height : 40px
}
#box{
width:200px;
height:200px;
background-color:pink;
position:absolute;
top:50px
}
</style>
</head>
<body>
<button id="btn">动画</button>
<div id="box"></div>
<script type="text/javascript">
// 问题：1、边界 2、定时器的管理
var btn = document.geElementById("btn");
var box = document.getElementById("box")
var timer = null;
btn.onclick = function() {
// 先关闭之前的定时器，防止定时器累加，导致速度加快
clearInterval(timer);
timer = setInterval(function () {
// num++;
if(box.offsetLeft === 500){
clearInterval(timer);
// 解决代码继续往下走
return
}
box.style.left = box.offsetLeft + 10 + 'px'
},30)
}
</script>
</body>
</html>