实例1——控制一个对象的匀速移动和停止
HTML：
复制代码 代码如下:
<input type="button" value=" Move It ! "/>
<div>
<img src="https://www.jb51.net/article/1.jpg" alt/>
</div>
JS：实现向右运动
复制代码 代码如下:
var timer=null;
window.onload=function(){
var odiv=document.getElementById('d1');
var obtn=document.getElementById('btn');
clearInterval(timer); //作用见要点①
obtn.onclick=function(){
timer=setInterval(function(){
var speed=10;
if(odiv.offsetLeft>=300){ //判断对象边距 到达指定位移则关闭定时器
clearInterval(timer);
}else{
odiv.style.left=odiv.offsetLeft+speed+'px';
}
},30);
}
}
要点：
①if语句的条件不能用“==”运算符，如上述代码，当speed的值为基数如7时，不断增加的左边距不会出现300px值，而是到达294后直接跳到301，导致条件失效，无法停止。
②使用else语句是防止停止移动后，每点击一次按钮，div任会移动一个speed。
③在定时器之前，先关闭一下定时器，防止连续点击按钮时，同时打开多个定时器，使移动速度叠加后更快。
封装：
复制代码 代码如下:
//object:要移动的对象id itarget:水平位移位置
var timer=null;
function moveto(object,itarget){
var obj=document.getElementById(object);
clearInterval(timer);
timer=setInterval(function(){
var speed=0;
if(obj.offsetLeft<itarget){ //通过对象距离父级的边距和水平位移量 判断左右位移方向
speed=10;
}else{
speed=-10;
}
if(obj.offsetLeft==itarget){
clearInterval(timer);
}else{
obj.style.left=obj.offsetLeft+speed+'px';
};
},30);
}
实例2——修改上述封装的函数moveto()，使该对象变速停止
JS：
复制代码 代码如下:
var timer=null;
function moveto(object,itarget){
var obj=document.getElementById(object);
clearInterval(timer);
timer=setInterval(function(){
var speed=0;
if(obj.offsetLeft<itarget){//通过位移量除以10，使speed递减，实现减速停止。 乘以10则为加速。通过乘除的数字，控制快慢
speed=(itarget-obj.offsetLeft)/10;
}else{
speed=-(obj.offsetLeft-itarget)/10;
}
speed=speed>0?Math.ceil(speed):Math.floor(speed);//取整，解决最后不足1px的位移量被忽略的问题
if(obj.offsetLeft==itarget){
clearInterval(timer);
}else{
obj.style.left=obj.offsetLeft+speed+'px';
};
document.title=obj.offsetLeft;
},30);
}
要点：
①通过递减speed值，实现变速。
②移动到最后，当像素小于1px时，小于1px的几个值不会被添加(或减去)到对象left中，而是被忽略，所以最终位移量比设定的水平位移位置itarget要少几个像素。解决的办法是进行取整：正数向上取整ceil()，负数向下取整floor()。
扩展：垂直位移的原理和水平位移的相同。
补充1：
解决speed与itarget不能整除，导致对象不能精确到达itarget位置，而是在其左右抖动问题：
复制代码 代码如下: