setInterval(回调函数,每次调用间隔时间)
返回值:返回一个Number类型的数据,用来作为唯一标识
clearInterval关闭定时器
<script type="text/javascript">
window.onload = function(){
var count = document.getElementById("count");
//每间隔一段时间执行一次,可以使用定时调用
/*for(var i = 0;i<10;i++){
count.innerHTML = i;
}*/
//定时调用
//1回调函数2每次间隔时间(ms)
//返回值:返回一个Number类型的数据,
var num = 1;
var timer = setInterval(function(){
count.innerHTML = num++;
if(num==11){
clearInterval(timer);
}
},1000);
//关闭定时器
//clearInterval()
}
</script>
定时切换图片
<script type="text/javascript">
window.onload = function(){
//自动切换
var img1 = document.getElementById("img1");
var imgArr = ["img/1.jpg","img/77B65B8382D22ACC8DBED7C0FA9DF602.gif","img/v2-55c82c3467fafc796cd2c2dea5c1498f.jpg"];
var index = 0;//保存索引
var timer;
var btn01 = document.getElementById("btn01");
btn01.onclick = function(){
//每点击一次就开启一个定时器,点击多次,开启多个,导致图片切换速度过快,并且只能关闭最后一次开启的定时器
//在开启定时器之前,需要将当前的其他定时器关闭,
clearInterval(timer);
timer = setInterval(function(){
index++;
//修改属性
/*if(index>= imgArr.length){
index = 0;
}*/
index = index%imgArr.length;
img1.src = imgArr[index];
},1000);
}
var btn02 = document.getElementById("btn02");
btn02.onclick = function(){
clearInterval(timer);//可以接受任意的参数,如果参数是一个有效的定时器标识,则停止对应的标识,如果不是不进行操作
}
}
</script>
使用定时调用使图片的移动平顺不卡顿
<script type="text/javascript">
window.onload = function(){
var box1 = document.getElementById("box1");
var speed = 10;
var dir = 0;//方向
//开启定时器控制控制div的移动
setInterval(function(){
switch(dir){
case 37:
box1.style.left = box1.offsetLeft - 10 +"px";
break;
case 38:
box1.style.left = box1.offsetLeft + 10 +"px";
break;
case 39:
box1.style.top = box1.offsetTop - 10 +"px";
break;
case 40:
box1.style.top = box1.offsetTop + 10 +"px";
break;
}
},30);
document.onkeydown = function(event){
event = event || window.event;
if(event.ctrlKey){
speed = 200;
}else{
speed = 10;
}
dir = event.keyCode;
};
document.onkeyup = function(){
dir = 0;
}
};
</script>
延时调用
<script type="text/javascript">
var num = 1;
/*setInterval(function(){
console.log(num++);
},3000);
*/
//延时调用:函数不马上执行,一段时间以后再执行 ,,只执行一次
//延时和定时可以互相代替,
var timer = setTimeout(function(){
console.log("1");
},10000);
clearTimeout(timer);//关闭延时调用
</script>