原生js实现随机点餐效果

html:<divclass="wrap"><divid="box"></div><buttonid="start">开始</button><buttonid="st

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);
}

效果：

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

总结

以上所述是小编给大家介绍的原生js实现随机点餐效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！ 如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

js 随机点餐 js随机点菜 js随机点名