window.onload=function(){
//获取box1和btn01
var box1=document.getElementById("box1");
var btn01=document.getElementById("btn01");
var timer;
var btn02=document.getElementById("btn02");
// 给btn01绑定单击响应事件
btn01.onclick=function(){
move(box1,800,10);
};
btn02.onclick=function(){
move(box1,0,10);
}
};
var timer;
function move(obj,target,speed){
clearInterval(timer);
function getStyle(obj,name){
if(window.getComputedStyle){
return getComputedStyle(obj,null)[name];
}else{
return obj.currentStyle[name];
}
};
var current=parseInt(getStyle(obj,"left"));
// 判断target与当前位置,决定speed的正负
//开启一个定时器,来执行动画效果
timer = setInterval(function(){
//获取box1原来的left值,利用getStyle函数来灵活获取
var oldValue=parseInt(getStyle(obj,"left"));
if(current>target){
speed=-speed;
};
//在旧值得基础上增加
var newValue=oldValue + speed;
// 向左移动,newValue不小于target 向右移动,newValue不大于target
if(speed<0&&newValue0&&newValue>target){
newValue=target;
};
// 将新值设置给newValue
obj.style.left=newValue+"px";
// 设置关闭定时器
if(newValue>=800){
clearInterval(timer);
};
},30);
}
我没有完整看代码,不过从你遇到的情况,字面理解的话,定时器里面的东西是定时执行。if放里面就会定时if,放定时器外面就不会受定时器影响。
放在定时器 里 它是异步的 。走到定时器 会把 它加入到堆栈中 。执行完 主程序 再执行 定时器里的