原生js实现一个随机点餐的小效果

html:

<div class="wrap">
        <div id="box">        
</div>
<button id="start">开始</button>
<button id="stop">停止</button>

css:

.wrap{
       width: 500px;
       height: 400px;
       margin: 0 auto;
       text-align: center;
}
#box{
        width: 100%;
        height: 300px;
        border: 1px solid red;            
        text-align: center;
        line-height: 300px;
        font-size: 30px;
        margin-bottom: 20px;
}

js:

var arr = ['宫保鸡丁', '糖醋里脊', '红烧带鱼', '牛腩煲', '红烧肉'];
var start = document.getElementById("start"),
            stop = document.getElementById("stop"),
            box = document.getElementById("box"),
            timer = null;

start.onclick = function(){    
      timer = setInterval(function(){
           var index = Math.floor(Math.random()*arr.length);
           box.innerHTML = arr[index];
       }, 100)            
}
stop.onclick = function(){
            clearInterval(timer);
}

效果：

点击开始，随机切换菜品，点击停止，好了吃鱼吧