1、单次定时器
语法：
// 单次定时器，只能执行一次
setTimeout(function() { },time);
// - 参数1：function 必需。函数，过time时间之后执行的业务逻辑。
// - 参数2：time 可选。执行或调用 function 需要等待的时间，以毫秒ms计。默认为 0。1s=1000ms
// 清除setTimeout单次定时器
clearTimeout(定时器名称);
代码示例：
vartimer=setTimeout(function() {
console.log("单次定时器");
},2000);
//点击按钮清除定时器
varbtn=document.getElementById("btn");
btn.onclick=function() {
clearTimeout(timer);
console.log("已经清除");
}
2.2、循环定时器
语法：
// 循环定时器，不停歇，每过一段时间time，执行一次。
setInterval(function() { },time);
// 参数同setTimeout
// 清除setInterval循环定时器
clearInterval(定时器名称);
代码示例：
vartimer=setInterval(function() {
alert("循环定时器");
},2000);
//点击按钮清除定时器
varbtn=document.getElementById("btn");
btn.onclick=function() {
clearInterval(timer);
}
案例：设置div的宽度
html和css代码
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin:0;
padding:0;
}
div{
width:200px;
height:150px;
background-color:red;
border-radius:100px;
}
</style>
</head>
<body>
<buttonid="btn">变宽</button>
<divid="dv"></div>
</body>
</html>
JavaScript代码
get_id("btn").onclick=function() {
// 初始宽度
varwidth=200;
// 开启定时器
vartimer=setInterval(function() {
// 每次加10
width+=10;
// 设置临界值，最大只能是800
if(width>=800) {
// 清除定时器
clearInterval(timer);
}
// 实时设置div宽度
get_id("dv").style.width=width+"px";
},20);
};
案例：随机点名系统
html和css代码
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>随机点名系统</title>
<style>
body{
background-color:hotpink;
}
.box{
width:1000px;
height:240px;
margin:0auto;
margin-top:100px;
clear:both;
}
#btn{
width:100px;
height:30px;
margin-left:600px;
margin-top:50px;
}
.name{
width:100px;
height:30px;
float:left;
background-color:antiquewhite;
margin-left:10px;
margin-top:10px;
text-align:center;
line-height:30px;
}
h1{
text-align:center;
}
</style>
</head>
<body>
<h1>随机点名系统</h1>
<divclass="box"id="box"></div>
<buttonid="btn">点名</button>
</body>
</html>
JavaScript代码
//创造虚拟后台数据
vararrs=["宋江","卢俊义","吴用","公孙胜","林冲","花荣","鲁智深","武松","李逵","晁盖","燕青","潘金莲","阎婆惜","关胜","秦明","呼延灼","陈达","张青","刘唐","李俊","张顺","高俅","孙二娘","戴宗","朱仝","方腊","阮小二","李瓶儿","庞春梅","白胜","吕方","董平","穆春","宋清","柴进","施恩","李忠","周通","杜兴","时迁","曹正","宋万","杨志","镇关西","西门庆"];
// 创建姓名列表
arrs.forEach(function(item,index) {
// console.log(item,index);
varnameNode=document.createElement("div");
nameNode.innerText=item;
nameNode.className="name";
get_id("box").appendChild(nameNode);
})
// 点名功能
vartimer=null;
get_id("btn").onclick=function() {
if(this.innerText==="点名") {
// 开启定时器
timer=setInterval(function() {
// 清空所有颜色 排他
for(vari=0;i<arrs.length;i++) {
get_id("box").children[i].style.background="";
}
// 留下当前颜色
varrandom=parseInt(Math.random()*arrs.length);
get_id("box").children[random].style.background="red";
},10);
this.innerText="停止";
}else{
//清除计时器
clearInterval(timer);
this.innerText="点名";
}
}