随机点菜器代码Java_原生js实现随机点餐效果

html:

开始

停止

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实现随机点餐效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！