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