javascript随机点餐
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>随机点名</title> <style type="text/css"> .wrap{ /* 400px; */ width: 40%; height: 200px; border: 6px #245269 solid; border-radius: 20px; box-sizing: border-box; background-color: #C4C4C4; margin: 0 auto; } #name_01, #name_02,#name_03,#name_04{ width: 300px; height: 60px; background-color: #87CEEB; font-size: 40px; text-align: center; font-weight: bold; line-height: 60px; margin: 30px auto; } .btn{ width: 200px; margin: 0 auto; text-align: center; } .btn button{ width: 80px; height: 50px; font-size: 25px; } </style> </head> <body> <div class="wrap"> <div id="name_01">一楼点餐</div> <div class="btn"> <button type="button" onclick="func_start(userfood_01, this.id)" id="food_01">开始</button> <button type="button" onclick="func_end()">结束</button> </div> </div> <div class="wrap"> <div id="name_02">二楼点餐</div> <div class="btn"> <button type="button" onclick="func_start(userfood_02, this.id)" id="food_02">开始</button> <button type="button" onclick="func_end()">结束</button> </div> </div> <div class="wrap"> <div id="name_03">三楼点餐</div> <div class="btn"> <button type="button" onclick="func_start(userfood_03, this.id)" id="food_03">开始</button> <button type="button" onclick="func_end()">结束</button> </div> </div> <div class="wrap"> <div id="name_04">四楼点餐</div> <div class="btn"> <button type="button" onclick="func_start(userfood_04, this.id)" id="food_04">开始</button> <button type="button" onclick="func_end()">结束</button> </div> </div> <script type="text/javascript"> //声明一个全局变量接收定时器 var setname //名单数据 var userfood_01 = ['麻辣烫', '烩面', '大盘鸡拌面', '热干面', '油泼面', '牛腩面', '担担面', '炒拉条', '大米套餐'] var userfood_02 = ['麻辣烫','蛋包饭','牛肉汤面','锅仔','南粉北面','瓦罐套餐','盖浇饭','老碗面','鱼粉']; var userfood_03 = ['火锅', '麻辣香锅', '天下好面', '黄焖小酥肉', '鱼粉']; var userfood_04 = ['小碗菜', '西红柿鸡蛋面', '烤肉拌饭', '饺子', '麻辣烫', '大盘鸡'] // 开始函数 function func_start(userfood, food_id){ // 获取元素对象 var uname = document.getElementById(food_id).parentElement.previousElementSibling; //判断是否按下开始,未按下则启动定时器,已按下则不能重复启动定时器 if(!setname){ // 启动定时器 setname = setInterval(function(){ // 获取随机整数作索引 var name_index = func_random(0,userfood.length-1); // 通过索引获取名字并写入标签 uname.innerHTML = userfood[name_index]; },50); }} // 结束函数 function func_end(){ // 清除定时器 clearInterval(setname); //重置setname setname = false; } // 获取m~n之间随机整数 function func_random(m,n){ return Math.floor(Math.random()*(n-m+1)+m); } </script> </body> </html>