js中setInterval与setTimeout的区别
一、setInterval与setTimeout
1、setInterval(函数,时间值(毫秒)) 设置定时器 重复循环
clearInterval(清除的定时器) 清除定时器
clearInterval(清除的定时器) 清除定时器
函数不可以带引号和小括号
2、setTimeout(函数,时间值(毫秒)) 设置定时器 只有一次,不会进行循环
clearTimeout(清除的定时器) 清除定时器
clearTimeout(清除的定时器) 清除定时器
函数不可以带引号和小括号
3、setInterval与setTimeout的区别:前者可以重复循环而后者只可以执行一次
二、换背景样例
可以进行切换背景,点击切换时,图片按照你设置的时间进行切换用setInterval实 现,点击停的按钮时可以停止
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js中的定时器</title>
<style>
h1{ height:30px; width:300px; border:2px solid pink; border-radius:20px; box-shadow:5px 5px 5px yellow; font-size:25px; font-family:"楷体"; line-height:30px; text-align:center; margin:40px auto;}
</style>
<script>
window.onload = function(){
var aBtn = document.getElementsByTagName('input');
var arrUrl = ['imgs/z.1.jpg','imgs/z.2.jpg','imgs/z.3.jpg','imgs/z.4.jpg'];
var oBody = document.body;
var num = 0;
var timer = null;
aBtn[0].onclick = function fn1(){
clearInterval(timer);
<html>
<head>
<meta charset="utf-8">
<title>js中的定时器</title>
<style>
h1{ height:30px; width:300px; border:2px solid pink; border-radius:20px; box-shadow:5px 5px 5px yellow; font-size:25px; font-family:"楷体"; line-height:30px; text-align:center; margin:40px auto;}
</style>
<script>
window.onload = function(){
var aBtn = document.getElementsByTagName('input');
var arrUrl = ['imgs/z.1.jpg','imgs/z.2.jpg','imgs/z.3.jpg','imgs/z.4.jpg'];
var oBody = document.body;
var num = 0;
var timer = null;
aBtn[0].onclick = function fn1(){
clearInterval(timer);
//在进行点击时先进性清理,防止多次点击执行多个,产生的效果是点击次 数越多,执行的越快
timer = setInterval( function(){
oBody.style.background = 'url('+arrUrl[num]+')';
num++;
num %= arrUrl.length;
},1000)
}
aBtn[1].onclick = function (){
clearInterval(timer);
}
}
</script>
</head>
<body>
<h1>js定时器选择背景实例</h1>
<input type="button" value="选择背景" />
<input type="button" value="停!" />
</body>
</html>
timer = setInterval( function(){
oBody.style.background = 'url('+arrUrl[num]+')';
num++;
num %= arrUrl.length;
},1000)
}
aBtn[1].onclick = function (){
clearInterval(timer);
}
}
</script>
</head>
<body>
<h1>js定时器选择背景实例</h1>
<input type="button" value="选择背景" />
<input type="button" value="停!" />
</body>
</html>