来回动画的封装—练习定时器和函数封装的思想
要点：
1.定时器原本只打开一个，在不做任何处理的时候，如果在上一个定时器执行完成之前快速点击按钮。定时器的所执行的函数的速度，会不断的加快 ，自己臆测的原因是，多线程，同时打开多个定时器，不会等到上一个处理完成之后来处理下一个，而是类似于多线程的原理，共同的处理定时器绑定的处理函数。
2.理解封装思想，这个函数，原来只是处理单一的功能，而封装之后，将需要的不同的对象接口暴露出来，功能模块代码进行封装，用户传递对象就可以对不同的目标对象执行相同的函数操作。
例子中的element.intervalName，原来是通过var进行声明得到的，这样会多申明一块空间的操作，执行的效率会慢一点，而这样在已有的对象的空间中添加一个新的属性，会提高运行速度。一点一滴的积累，到最后会是量的质变。
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
input{
margin-top: 20px;
}
div{
margin-top: 30px;
width: 225px;
height: 175px;
background-color: #6D1F9B;
position: absolute;
/*一定要是相对定位，不然写的移动的位置不能改变而显示出来*/
}
</style>
</head>
<body>
<input type="button" value="移动500px" id="btn1">
<input type="button" value="移动1000px" id="btn2">
<div id="div"></div>
<script type="text/javascript">
function myGet(id){
return document.getElementById(id);
}
myGet("btn1").onclick = function(){
animate(myGet("div"),500);
}
myGet("btn2").onclick = function(){
animate(myGet("div"),1000);
}
function animate(element,target){
clearInterval(element.intervalName);
// 每次点击移动按钮的时候,清理定时器,将原来的定时器清理掉,不然会叠加多线程多个定时器,加快速度
element.intervalName = setInterval(function(){
var current = element.offsetLeft;
// 通过.style.left不能获取style标签里面的值，只能获取到内部样式的值
// 而.offsetLeft这个值，可以获取到任何位置，div这个属性的.left的值，不带单位
var step = 8;
// 每次增加10像素
step = current<target?step:-step;
// 判断是在目标的左边还是右边，从而判断是前进还是后退
current += step;
if(Math.abs(target-current)>Math.abs(step)){
element.style.left = current + "px";
}else{
clearInterval(element.intervalName);
element.style.left = target + "px";
// 当执行到最后一步时，如果不满增加的长度，而再一次执行时，而又超过目标像素的距离，
// 所以设置直接一步到目标距离,而不会
}
},30)
}
</script>
</body>
</html>效果：