微客导航 » 文章资讯 » 原生js实现随机点餐效果

原生js实现随机点餐效果

2023-08-04 18:19:04 301

html:

开始停止

css:

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

js:

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

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

效果：

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

总结

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

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

原生js实现随机点餐效果

热门推荐

随机推荐