大家好，欢迎来到IT知识分享网。
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 = "点名"; } }免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/98015.html
