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 = "点名"; } }
