js基础_84、定时器的应用
应用1
点击按钮以后，box持续向右边移动，到800px时停下。
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
#box1{
width: 100px;
height: 100px;
background-color:red;
position: absolute;
left: 0;
}
</style>
<script>
var getStyle=function(obj,name){
if(window.getComputedStyle){//加一个window它会去window里面找该属性，没有找到就返回一个false
//不加window它会先去这个方法找getComputedStyle变量，找不到window也找不到，就会报错，导致判断无意义。
//正常浏览器的方式，具有getComputedStyle()方法
return getComputedStyle(obj)[name];
}
//IE8的方法，没有getComputedStyle()方法
return obj.currentStyle[name]
}
var fun1=function (obj,target,speed){
//清除定时器
clearInterval(timer1);
//当前位置
var oldleft=parseInt(getStyle(obj,"left"));
//判断移动方向
if(oldleft-target>0){
speed=-speed;
}
timer1=setInterval(function(){
//当前位置
oldleft=parseInt(getStyle(obj,"left"));
//移动后的位置
var newleft=oldleft+speed;
//判断是否移动到了目标位置
if((speed>0&&newleft>target)||(speed<0&&newleft<target))
{
newleft=target;
//清除定时器
clearInterval(timer1);
}
obj.style.left=newleft+"px";
},30);
};
//存放定时器的标识
var timer1;
window.onload=function(){
//获取box1
var box1=document.getElementById("box1");
//获取按钮
var btn1=document.getElementById("btn1");
//获取按钮
var btn2=document.getElementById("btn2");
btn1.onclick=function(){
fun1(box1,800,10);
};
btn2.onclick=function(){
fun1(box1,0,10);
};
};
</script>
</head>
<body>
<button id="btn2">点击按钮以后box向左移动</button>
<button id="btn1">点击按钮以后box向右移动</button>
<br /><br />
<div id="box1"></div>
<div style="height: 1000px;width: 0;border: 1px solid red;position: absolute;left: 799px;"></div>
</body>
</html>
应用一优化1
解决了两个div同时变化的时候会暂停其中一个div的问题
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
#box1{
width: 100px;
height: 100px;
background-color:red;
position: absolute;
left: 0;
}
#box2{
width: 100px;
height: 100px;
background-color:yellow;
position: absolute;
left: 0;
top: 200px;
}
</style>
<script>
var getStyle=function(obj,name){
if(window.getComputedStyle){//加一个window它会去window里面找该属性，没有找到就返回一个false
//不加window它会先去这个方法找getComputedStyle变量，找不到window也找不到，就会报错，导致判断无意义。
//正常浏览器的方式，具有getComputedStyle()方法
return getComputedStyle(obj)[name];
}
//IE8的方法，没有getComputedStyle()方法
return obj.currentStyle[name]
}
var fun1=function (obj,target,speed){
//清除定时器
clearInterval(obj.timer1);
//当前位置
var oldleft=parseInt(getStyle(obj,"left"));
//判断移动方向
if(oldleft-target>0){
speed=-speed;
}
obj.timer1=setInterval(function(){
//当前位置
oldleft=parseInt(getStyle(obj,"left"));
//移动后的位置
var newleft=oldleft+speed;
//判断是否移动到了目标位置
if((speed>0&&newleft>target)||(speed<0&&newleft<target))
{
newleft=target;
//清除定时器
clearInterval(obj.timer1);
}
obj.style.left=newleft+"px";
},30);
};
window.onload=function(){
//获取box1
var box1=document.getElementById("box1");
//获取按钮
var btn1=document.getElementById("btn1");
//获取按钮
var btn2=document.getElementById("btn2");
//获取按钮
var btn3=document.getElementById("btn3");
btn1.onclick=function(){
fun1(box1,800,10);
};
btn2.onclick=function(){
fun1(box1,0,10);
};
btn3.onclick=function(){
fun1(box2,800,10);
};
};
</script>
</head>
<body>
<button id="btn2">点击按钮以后box向左移动</button>
<button id="btn1">点击按钮以后box向右移动</button>
<button id="btn3">点击按钮以后box2向右移动</button>
<br /><br />
<div id="box1"></div>
<div id="box2"></div>
<div style="height: 1000px;width: 0;border: 1px solid red;position: absolute;left: 799px;"></div>
</body>
</html>
应用一优化2
实现回调函数
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
#box1{
width: 100px;
height: 100px;
background-color:red;
position: absolute;
left: 0;
}
#box2{
width: 100px;
height: 100px;
background-color:yellow;
position: absolute;
left: 0;
top: 200px;
}
</style>
<script>
var getStyle=function(obj,name){
if(window.getComputedStyle){//加一个window它会去window里面找该属性，没有找到就返回一个false
//不加window它会先去这个方法找getComputedStyle变量，找不到window也找不到，就会报错，导致判断无意义。
//正常浏览器的方式，具有getComputedStyle()方法
return getComputedStyle(obj)[name];
}
//IE8的方法，没有getComputedStyle()方法
return obj.currentStyle[name]
}
/*
* 参数：obj：要执行动画的对象
* attr：要执行动画的样式，比如：width height top left
* target：执行动画的目标位置
* speed：移动的速度
* callback：回调函数，这个函数将会在动画完毕后执行
*/
var fun1=function (obj,attr,target,speed,callback){
//清除定时器
clearInterval(obj.timer1);
//当前位置
var oldleft=parseInt(getStyle(obj,attr));
//判断移动方向
if(oldleft-target>0){
speed=-speed;
}
obj.timer1=setInterval(function(){
//当前位置
oldleft=parseInt(getStyle(obj,attr));
//移动后的位置
var newleft=oldleft+speed;
//判断是否移动到了目标位置
if((speed>0&&newleft>target)||(speed<0&&newleft<target))
{
newleft=target;
//清除定时器
clearInterval(obj.timer1);
//判断是否有回调函数，有就执行
callback&&callback();
}
obj.style[attr]=newleft+"px";
},30);
};
window.onload=function(){
//获取box1
var box1=document.getElementById("box1");
//获取按钮
var btn1=document.getElementById("btn1");
//获取按钮
var btn2=document.getElementById("btn2");
//获取按钮
var btn3=document.getElementById("btn3");
//获取按钮
var btn4=document.getElementById("btn4");
btn1.onclick=function(){
fun1(box1,"left",800,10);
};
btn2.onclick=function(){
fun1(box1,"left",0,10);
};
btn3.onclick=function(){
fun1(box2,"left",800,10);
};
btn4.onclick=function(){
fun1(box2,"width",800,10,function(){
fun1(box2,"height",300,40,function(){
fun1(box2,"width",100,10,function(){
fun1(box2,"height",100,40,function(){
fun1(box2,"left",800,40,function(){
});
});
});
});
});
};
};
</script>
</head>
<body>
<button id="btn2">点击按钮以后box向左移动</button>
<button id="btn1">点击按钮以后box向右移动</button>
<button id="btn3">点击按钮以后box2向右移动</button>
<button id="btn4">测试</button>
<br /><br />
<div id="box1"></div>
<div id="box2"></div>
<div style="height: 1000px;width: 0;border: 1px solid red;position: absolute;left: 799px;"></div>
</body>
</html>
