js二维数组_JavaScript数组_类似于抽奖案例（二十四）-CSDN博客

案例名称：今天吃什么？

用到技术点：数组结合定时器

效果图：

效果操作：点击开始，在数组 ["米线","面条","盖饭","鱼香肉丝","宫保鸡丁","饼","馒头"];没隔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 );
}