JavaScript数组_相似于抽奖案例（二十四）

案例名称：今天吃什么？html

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

效果图：bash

效果操做：点击开始，在数组 ["米线","面条","盖饭","鱼香肉丝","宫保鸡丁","饼","馒头"];没隔50毫秒出现一个数组内容，点击中止，就知道今天吃什么了。markdown

逻辑思想：oop

1》先有一个数组 var arr = ["米线","面条","盖饭","鱼香肉丝","宫保鸡丁","饼","馒头"];
2》点击开始按钮， 启用定时器,
3》点击中止按钮,  中止定时器复制代码

HTML代码：ui

<!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代码：spa

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数组_相似于抽奖案例（二十四）

下节预告：数组_二维数组_三维数组

参考视频连接：www.3mooc.com/front/couin…