js中setInterval与setTimeout的区别及换背景样例

来源：互联网发布：9分达人阅读知乎编辑：程序博客网时间：2024/06/05 06:27

js中setInterval与setTimeout的区别

一、setInterval与setTimeout

1、setInterval(函数,时间值(毫秒)) 设置定时器重复循环
clearInterval(清除的定时器) 清除定时器

函数不可以带引号和小括号

2、setTimeout(函数,时间值(毫秒)) 设置定时器只有一次，不会进行循环
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);

//在进行点击时先进性清理，防止多次点击执行多个，产生的效果是点击次数越多，执行的越快
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>

阅读全文

0 0