知识点
- setInterval() 按照指定周期执行某个函数
- clearInterval() 取消setInterval()的定时执行操作
- setTimeout() 在指定毫秒数后执行某个函数
- setInterval()会一直循环调用函数，直到clearInterval()被调用或窗口关闭。
- clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值
- 1秒 = 1000毫秒
知识点实例
- 每秒输出一句："坚持才能学好编程"
setInterval(function(){
console.log('坚持才能学好编程');
},1000)
- 2s后弹出 "ok" 提示文本框
setTimeout(function(){
alert('ok');
},2000)
- 存在变量i，每500毫秒执行一次i++并输出i的值;
5秒后停止上述操作
var i = 0;
var id = setInterval(function(){ // 获得setInterval()的id值
i++;
console.log(i);
},1000);
setTimeout(function(){
clearInterval(id); // 取消id对应的setInterval()操作
},5000);
作业练习 - "点兵点将"-小游戏
游戏规则：一个开始按钮，一个停止按钮，一个名字挑选框，一个选中框
- 点击开始按钮，显示框每100毫秒换一个名字显示；
- 点击停止按钮，则显示框停止换名字，并将当前显示的名字写入选中框。
要求：选中过的名字不被再次选中
作业实现参考
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>点名环节</title>
<style>
.pick-area {
margin: 100px auto 20px;
400px;
height: 600px;
text-align: center;
border: 1px solid #0a001f;
background-color: #e3efff;
}
.picked-name {
margin: 50px auto 0;
padding: 5px 15px;
200px;
height: 68px;
line-height: 68px;
font-size: 32px;
font-weight: 600;
background-color: #3b7b9a;
color: #a5def1;
}
.pick-area button {
margin: 20px 10px;
padding: 5px 20px;
background-color: #0b6694;
color: #eee;
}
.picked-list>ul {
padding: 10px 20px;
text-align: left;
}
.picked-list>ul>li {
display: inline-block;
padding: 5px 15px;
font-weight: 600;
color: #cd7919;
}
</style>
</head>
<body>
<div class="pick-area">
<h4>点兵点将</h4>
<hr>
<div class="picked-name" id="j-picked"></div>
<button id="j-start">开始</button>
<button id="j-stop">停</button>
<hr>
<div class="picked-list">
<h4>选中名单</h4>
<ul id="picked">
</ul>
</div>
</div>
</body>
<script>
// 滚动数组
var list = ['小明', '聪聪', '小美', '洋洋', '小p', '平平', '杨杨', '小乐', '米饭', '小七', '阿怪', '面团', '阿晓', '无双', '飞飞'];
// 全局变量记录setInterval()返回值
var id;
// 存放被选中名字
var picked = [];
// 显示框给个初值
document.getElementById('j-picked').innerText = list[0];
// 在开始按钮上绑定点击事件
document.getElementById('j-start').onclick = function () {
id = start();
}
// 在停止按钮上绑定点击事件
document.getElementById('j-stop').onclick = function () {
stop();
}
// 开始按钮
function start() {
return id = setInterval(function () {
var num = Math.floor(Math.random() * list.length);
document.getElementById('j-picked').innerText = list[num];
}, 100);
}
// 停止按钮
function stop() {
clearInterval(id);
var p = document.getElementById('j-picked').innerText;
picked.push(p);
writePickedLi(p);
removePicked(p);
}
// 将选中名单添加到选中列表
function writePickedLi(p) {
var li = document.createElement('li');
var pickedName = document.createTextNode(p);
li.appendChild(pickedName);
document.getElementById('picked').append(li);
}
// 选中名字移除滚动数组
function removePicked(v)
{
for (var i=0; i<list.length; i++) {
if(list[i]==v) {
list.splice(i,1);
}
}
}
</script>
</html>
效果图
