![cf9f2e18600d15fe3e42b79767f58b56.png](https://i-blog.csdnimg.cn/blog_migrate/39b59d9dcea1c0138a66b311dd6f7c0a.jpeg)
案例名称:今天吃什么?
用到技术点:数组结合定时器
效果图:
![580d9895a075d23a919a87f6e32f368f.png](https://i-blog.csdnimg.cn/blog_migrate/f4c127d5c42c38555e30483140478621.jpeg)
效果操作:点击开始,在数组 ["米线","面条","盖饭","鱼香肉丝","宫保鸡丁","饼","馒头"];没隔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 );
}
下节预告:数组_二维数组_三维数组
参考视频链接:
JavaScript从0基础到实战案例以及完成效果全套视频课程-三人行慕课www.3mooc.com![6df447fefeb82aacaea9e938ee8e4a45.png](https://i-blog.csdnimg.cn/blog_migrate/e0965ab414d9e2c3870f5d074b1b1090.jpeg)