一、定时器
定时器
JS执行速度非常的快，若希望程序每间隔一段时间执行异常，可以使用定时器
setInterval()
定时调用，可以将函数每隔一段时间调用一次
参数：1.回调函数，该函数每隔一段时间执行一次
2.每次回调函数的间隔时间，单位为毫秒，会返回一个Number类型的数字，作为定时器的唯一标识，相当于编号
clearInterval()
1、可以用来关闭定时器，需要一个定时器标识作为参数
2、 若接受到的参数无效则什么都不会做
在页面上使用定时器实现一个数字1-11，每隔500毫秒切换，然后到11停止的效果：
var count=document.getElementById("count");
var num=1;
var timer=setInterval(function(){
count.innerHTML=num++;
if(num==11){
clearInterval(timer);
}
},500);二、延时调用和定时调用
延时调用
-延时调用一个函数不马上执行，一段时间之后再执行,只会执行一次
-setTimeout(function(){},1000);
延时调用和定时调用的区别：
延时调用只执行一次，定时调用执行多次， 延时调用和定时调用实际上可以互相代替
三、图片定时切换
先获取几个对象
var img2=document.getElementById("img1");
var imgArr=["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg","img/6.jpg"];
var index=0;
var btn01=document.getElementById("btn01");
var btn02=document.getElementById("btn02");
var timer;开启定时器定时切换，每点击一次都会开启一个定时器 所以会出现连续点击多次看起来切换速度超级快的情况还暂停不了，因为暂停只能暂停最后一个定时器，所以在开启新的定时器之前，先把其他定时器关闭。
定时器设置代码：
clearInterval(timer);
timer=setInterval(function(){
index++;
if(index>=imgArr.length){
index=0;
}
//index=index%imgArr.length;//也可以达到使得下标不超过数组长度的效果
img1.src=imgArr[index];
},500);
};
btn02.onclick=function(){
clearInterval(timer);
};
这里放一个作者源文件代码，直接粘贴即可运行（记得在img文件夹里面添加同名的图片）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>定时器</title>
<script type="text/javascript">
window.onload=function(){
var num=1;
var timer=setInterval(function(){
count.innerHTML=num++;
if(num==11){
clearInterval(timer);
}
},500);
/* 图片定时切换 */
var img2=document.getElementById("img1");
var imgArr=["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg","img/6.jpg"];
var index=0;
var btn01=document.getElementById("btn01");
var btn02=document.getElementById("btn02");
var timer;
btn01.onclick=function(){
clearInterval(timer);
timer=setInterval(function(){
index++;
if(index>=imgArr.length){
index=0;
}
//index=index%imgArr.length;//也可以达到使得下标不超过数组长度的效果
img1.src=imgArr[index];
},500);
};
btn02.onclick=function(){
clearInterval(timer);
};
};
</script>
</head>
<body>
<!--<h1 id="count"></h1>-->
<img id="img1" src="img/1.jpg" />
<button id="btn01">开始</button>
<button id="btn02">停止</button>
</body>
</html>
四、简易动画效果
这里为了方便使用，我们采用外部引入JS文件，该JS文件里面的两个函数可以实现简易的动画效果。
外部引入的格式：
<script type="text/javascript" src="./js/简易动画.js"></script>刚开始作者将定时器全部由timer保存，会出现两个box无法同时跑的现象，我们将每个对象赋予不同的定时器就可以了，在开启定时器的函数前面加一个：obj.timer=steInterval(function({}),30);
以下是简易动画的JS代码：
/* 创建一个执行简单动画的函数
参数：
obj :执行动画的对象
atter:要执行动画的样式，例如：left\top\height
target:执行动画的目标
speed：执行动画的速度
callback:回调函数
*/
function move(obj,atter,target,speed,callback){
//开启新的定时器之前关闭旧的定时器
clearInterval(timer);
//获取box1原来的left值
var current=parseInt(getStyle(obj,atter));
//判断该往哪边跑
if(current>target){
speed=-speed;
}
//开启定时器
obj.timer=setInterval(function(){
//获取box1原来的left值
var oldValue=parseInt(getStyle(obj,atter));
//在旧值的基础上增加
var newValue=oldValue+speed;
//判断是否大于给定值
if((speed>0&&newValue>target)||(speed<0&&newValue<target)){
newValue=target;
}
//将新值付给box1
obj.style[atter]=newValue+"px";
//当元素移动到800PX，使其停止运行
if(newValue==target){
//动画执行完毕关闭定时器
clearInterval(obj.timer);
//动画执行完毕，调用回调函数，有才调，没有就不调
callback && callback();
}
},30);
}
//获取对象样式 obj:获取对象 name:想要的样式值
function getStyle(obj,name){
if(window.getComputedStyle){
return getComputedStyle(obj,null)[name];
}else{
return obj.currentStyle[name];
}
}实现的效果：
全部代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>定时器应用</title>
<style type="text/css">
#box1{
width: 100px;
height: 100px;
border: #000000 solid 1px;
background-color: #A52A2A;
position: absolute;
left: 0;
}
#box2{
width: 100px;
height: 100px;
border: #000000 solid 1px;
background-color: #5F9EA0;
position: absolute;
left: 0;
top: 200px;
}
#xian{
width:0px;
height:1000px;
border-left: #000000 solid 1px;
left: 800px;
position: absolute;
top: 0;
}
</style>
<script type="text/javascript" src="./js/简易动画.js"></script>
<script type="text/javascript">
/* 定时器由timer保存，所有执行的都由它保存
会出现两个box无法同时跑的现象，我们将每个对象
赋予不同的定时器就可以了，在开启定时器的函数前面加一个
obj.timer=steInterval(function({}),30);
*/
var timer;
window.onload=function(){
var box1=document.getElementById("box1");
var box2=document.getElementById("box2");
var btn01=document.getElementById("btn01");
var btn02=document.getElementById("btn02");
var btn03=document.getElementById("btn03");
var btn04=document.getElementById("btn04");
//点击按钮后。box1向右移动
btn01.onclick=function(){
move(box1,"left",800,10);
};
//点击按钮后。box1向左移动
btn02.onclick=function(){
move(box1,"left",0,10);
};
//点击按钮后。box2向右移动
btn03.onclick=function(){
move(box2,"left",800,30);
};
//测试
btn04.onclick=function(){
move(box2,"width",800,30,function(){
move(box2,"height",800,30,function(){
move(box2,"top",0,30,function(){
move(box2,"top",200,30,function(){
move(box2,"width",100,30,function(){
move(box2,"height",100,30,function(){
})
})
})
})
});
});
};
};
</script>
</head>
<body>
<button id="btn01">点击后box1向右移动</button>
<button id="btn02">点击后box1向左移动</button>
<button id="btn03">点击后box2向右移动</button>
<button id="btn04">测试</button>
<br /><br />
<div id="box1"></div>
<div id="box2"></div>
<div id="xian" ></div>
</body>
</html>