欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

原生js實現(xiàn)隨機點餐效果

 更新時間：2019年12月10日 10:32:42   作者：池中飛雪  
一款十分簡單的原生js實現(xiàn)的隨機點菜代碼，點擊點菜按鈕隨機點取上面菜單的菜品，可根據(jù)需求改成自己需要功能，比如說隨機點名。感興趣的朋友來參考實現(xiàn)代碼吧

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

效果：

點擊開始，隨機切換菜品，點擊停止，好了吃魚吧

總結(jié)

以上所述是小編給大家介紹的原生js實現(xiàn)隨機點餐效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！

相關文章

最新評論