JavaScript数组_类似于抽奖案例（二十四）
2019-12-04 本文已影响0人
终身成长人格
案例名称：今天吃什么？
用到技术点：数组结合定时器
效果图：
image
效果操作：点击开始，在数组 ["米线","面条","盖饭","鱼香肉丝","宫保鸡丁","饼","馒头"];没隔50毫秒出现一个数组内容，点击停止，就知道今天吃什么了。
逻辑思想：
1》先有一个数组 var arr = ["米线","面条","盖饭","鱼香肉丝","宫保鸡丁","饼","馒头"];
2》点击开始按钮， 启用定时器,
3》点击停止按钮, 停止定时器
HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box{
border:1px solid #ccc;
width:300px;
height:300px;
text-align: center;
line-height: 300px;
font-size: 50px;
}
</style>
</head>
<body>
<div id="box"></div>
<input type="button" value="开始" id="btn">
<input type="button" value="停止" id="stop">
<script src="script.js"></script>
</body>
</html>
JS代码：
var arr = ["米线","面条","盖饭","鱼香肉丝","宫保鸡丁","饼","馒头"];
var btn = document.getElementById("btn"),
stop = document.getElementById("stop"),
box = document.getElementById("box"),
index = 0,
time = null;
btn.onclick = function(){
time = setInterval(function(){
box.innerHTML = arr[index];
index++;
if(index>arr.length-1){
index=0;
}
},50);
}
stop.onclick = function(){
clearInterval( time );
}
