1.
<body>
<input id="btn" type="button" value="按钮">
<div id="div"></div>
<script>
var btn= document.getElementById('btn');
var odiv=document.getElementById("div");
//var timer=null;
odiv.timer=null;
btn.onclick=function(){
clearInterval(odiv.timer);//防止动画在执行过程中,人为的在不停的点击按钮,不断产生定时器
odiv.timer=setInterval(function(){
var speed =getStyle(odiv,'left',50);//odiv 往右移动50px
if(speed>900){
speed=900;
}
odiv.style.left=speed+'px';//每隔0.1s往右移动10px
if(speed==900){//停止移动
clearInterval(odiv.timer);
alert(speed);
}
},200);
}
function getStyle(obj,attr,step){//为什么要parseInt(),因为obj.currentStyle[attr] 拿到的是30px -->30
return parseInt(obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr])+step ;
}
</script>
</body>
2.封装成函数
<style> div{ 50px;height: 50px; background: red;border: 1px solid black; position: absolute; top: 50px; left: 30px} </style> </head> <body> <input id="btn1" type="button" value="往前跑"> <input id="btn2" type="button" value="往后跑"> <div id="div"></div> <script> var btn1= document.getElementById('btn1'); var btn2= document.getElementById('btn2'); var odiv=document.getElementById("div"); odiv.timer=null; btn1.onclick=function(){ doMove(odiv,20,800,50);//odiv往右每次移动20px 到800px位置停止,速度为50ms/次 } btn2.onclick=function(){ doMove(odiv,-20,10,50); } function doMove(obj,stepLength,target,animationVelocity){ clearInterval(obj.timer); odiv.timer=setInterval(function(){ var speed =getStyle(obj,'left')+stepLength;//步长 if(speed>target && stepLength>0){//往右跑 speed=target; } if(speed<target && stepLength<0){//往左跑 speed=target; } obj.style.left=speed+'px';//每隔0.1s 移动stepLength px if(speed==target){//停止移动 clearInterval(obj.timer); } },animationVelocity); } function getStyle(obj,attr){//为什么要parseInt(),因为obj.currentStyle[attr] 拿到的是30px -->30 return parseInt(obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr]) ; } </script> </body> </html>
3.升级 包装
<input id="btn1" type="button" value="往右跑">
<input id="btn2" type="button" value="往左跑">
<input id="btn3" type="button" value="往下跑">
<input id="btn4" type="button" value="往上跑">
<div id="div"></div>
<script>
var btn1= document.getElementById('btn1');
var btn2= document.getElementById('btn2');
var btn3= document.getElementById('btn3');
var btn4= document.getElementById('btn4');
var odiv=document.getElementById("div");
odiv.timer=null;
btn1.onclick=function(){
doMove(odiv,'left',20,800,50);//让 odiv 以20px/50ms 的速度 跑到距离left为800px的位置停下来
}
btn2.onclick=function(){
doMove(odiv,'left',20,10,50);
}
btn3.onclick=function(){
doMove(odiv,'top',20,500,50);//让 odiv 以20px/50ms 的速度 跑到距离top顶部为500px的位置停下来
}
btn4.onclick=function(){
doMove(odiv,'top',20,50,50);
}
function doMove(obj,attr,stepLength,target,animationVelocity){
stepLength=(getStyle(obj,attr)<target?stepLength:-stepLength);//如果obj所处的位置小于目标位置,则步长取正数,反之取负数
clearInterval(obj.timer);
odiv.timer=setInterval(function(){
var speed =getStyle(obj,attr)+stepLength;//步长
if(speed>target && stepLength>0 || speed<target && stepLength<0){
speed=target;
}
obj.style[attr]=speed+'px';//每隔animationVelocity秒 移动stepLength px
if(speed==target){//停止移动
clearInterval(obj.timer);
}
},animationVelocity);
}
function getStyle(obj,attr){//为什么要parseInt(),因为obj.currentStyle[attr] 拿到的是30px -->30
return parseInt(obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr]) ;
}
</script>