js 定时器
- setInterval() :按照指定的周期(以毫秒计)来调用函数或计算表达式。方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。
- setTimeout() :在指定的毫秒数后调用函数或计算表达式。
示例
//开启定时器
var timer = setInterval(function(){
alert("这是循环定时器")
},1000)
//清除定时器
clearInterval(timer)
实现随机点名案例
html+css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>随机点名系统</title>
<style>
body {
background-color: #cfc;
}
.box {
width: 1000px;
height: 240px;
margin: 0 auto;
margin-top: 100px;
clear: both;
}
#btn {
width: 100px;
height: 30px;
margin-left: 600px;
margin-top: 50px;
background-color: pink;
}
.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代码
<script>
//先创建一个数组,模拟后台数据
var names = [
"赵修永",
"胡宏伯",
"聂哲茂",
"辛烨烁",
"蒋德寿",
"郭飞鹏",
"冉经赋",
"余宏茂",
"仰健柏",
"焦宏峻",
"融元忠",
"桓翰飞",
"能承颜",
"班志国",
"甘泰初",
"连天巧",
"邓暄文",
"范淑颖",
"詹梓珊",
"韩春枫",
"谭贝莉",
"乜宛儿",
"胡婷丽",
"于筠竹",
"余小溪",
"景水晶",
"熊寒香",
"符飞瑶",
"贾秀竹",
"蓟婷旭",
];
//1.创建姓名列表names渲染页面
names.forEach(function (item, index) {
//.创建一个元素用于div用于存放姓名列表
var nameNode = document.createElement("div");
//写入本文
nameNode.innerText = item;
//类名添加
nameNode.className = "name";
//在box下插入子元素节点nameNode
var _box = document.getElementById("box");
_box.appendChild(nameNode);
});
//2.实现点名功能
var _box = document.getElementById("box");
var _btn = document.getElementById("btn");
/*
开关思想:
(1)声明一个开关变量(一般默认为true)
(2)遍历数组,判断每一个元素是否满足条件,遇到不满足修改开关变量为false
* 遇到满足的不用修改,因为默认就是true
(3)返回开关变量值
*/
var flag = true; //按钮的状态, true显示点名,false显示停止
var timer = null; //将timer提升到全局
_btn.onclick = function () {
if (flag) {
//开启定时器
timer = setInterval(function () {
//光标在name列表上随机移动
//初始化操作
names.forEach(function (item, index) {
_box.children[index].style.background = "";
});
//索引的随机数获取
var indexRan = Math.floor(Math.random() * names.length);
_box.children[indexRan].style.background = "yellow";
}, 100);
//修改按钮文字
this.innerText = "停止";
flag = false;
} else {
//停止点名,清除计时器
clearInterval(timer);
//修改按钮文字
this.innerText = "点名";
flag = true;
}
};
</script>