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>