zoukankan      html  css  js  c++  java
  • jquery解决随机点餐系统重复问题

    通过写一个newarr()方法加了一个判断

    function newarr(){
            alert(val)
            names = jQuery.grep(names, function( a ) {return a !== val;});
            a1 = jQuery.grep(a1, function( a ) {return a !== val;});
            a2 = jQuery.grep(a2, function( a ) {return a !== val;});
            a3 = jQuery.grep(a3, function( a ) {return a !== val;});
            a4 = jQuery.grep(a4, function( a ) {return a !== val;});
    }

    代码如下:

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>jQuery随机点餐小程序 - 源码之家</title>
    </head>
    <style>
        body {
            background: #ef4009c2
        }
    
        .main {
            width: 660px;
            height: 760px;
            margin: 80px auto;
        }
    
        .button {
            height: 100px;
            color: #fff;
            font-weight: bold;
            font-size: 58px;
            position: relative;
            top: 210px;
            text-align: center;
            cursor: pointer;
        }
    
        .name {
            position: relative;
            top: 300px;
            height: 100px;
            color: #9fc;
            font-weight: bold;
            font-size: 58px;
            text-align: center;
        }
    
        ul li {
            display: inline;
            list-style: none;
            line-height: 30px;
        }
    
        .types {
            margin: 0 20px;
            color: #ffffff;
            font-weight: bold;
            font-size: 30px;
            text-align: center;
            cursor: pointer;
            height: 150px;
            line-height: 150px;
        }
    
        .checked {
            background: cornflowerblue;
            padding: 20px;
        }
    
        .tips {
            text-align: center;
            color: #ffffff;
            line-height: 50px;
            font-size: 30px;
            margin-top: 200px;
        }
    
    </style>
    <script src="../js/jquery.js"></script>
    <script src="../js/jquery-migrate-1.2.1.min.js"></script>
    
    <body>
    
    <div class="main">
        <ul>
            <li class="types all" data-index="0">全部</li>
            <li class="types aa" data-index="1">简餐</li>
            <li class="types bb" data-index="2">饮品</li>
            <li class="types cc" data-index="3">麻辣鲜香</li>
            <li class="types dd" data-index="4">甜点</li>
        </ul>
        <div class="button"><span>开始</span></div>
        <div class="name"><span id='ko'>随机名称</span></div>
    </div>
    <div class="tips">如果您点击超过十次还没有选到满意的菜单,也许在你心里面早已有答案。遵循自己的内心吧~!</div>
    
    <script>
        a1 = ['烩面', '麻辣烫', '酸辣粉', '食堂', '煲仔饭', '鱼香肉丝盖饭', '鸡公煲', '热干面', '蒸饺+混沌', '土豆粉', '拌面', '汉堡+炸鸡', '烩菜', '羊肉泡馍', '煎饼果子', '螺蛳粉', '米线', '肠粉', '凉皮', '擀面皮', '爆肚', '肉夹馍', '炒饭', '饭团', '卤肉饭', '渔粉', '焖面', '煎包', '粥+包子']
        a2 = ['烧仙草', '普通奶茶', '芬达', '酸奶', '凉白开', '柠檬水', '可乐']
        a3 = ['小龙虾', '火锅', '串串', '大盘鸡', '冰雪俏鸭头', '麻辣烫', '冒菜', '麻辣香锅', '烤鱼', '大虾', '肉蟹煲', '寿司', '自助烤肉', '自助海鲜', '自助牛排']
        a4 = ['蛋糕', '千层', '面包', '蛋挞', '泡芙', '马卡龙', '布丁', '鸡蛋仔', '冰激凌', '炒酸奶', '芋圆']
        names = ['烩面', '棉花糖', '重庆火锅', '串串', '麻辣烫', '奶茶', '酸辣粉', '食堂', '鸡蛋仔', '煲仔饭', '鱼香肉丝盖饭', '鸡公煲', '热干面', '蒸饺+混沌', '土豆粉', '自助火锅', '拌面', '披萨', '芬达', '汉堡+炸鸡', '烩菜', '羊肉泡馍', '煎饼果子', '猪蹄', '麻辣小龙虾'];
    
    
        var ele = 0;
    
        function getType() {
            var type = document.querySelectorAll('.types');
    
            for (var i = 0; i < type.length; i++) {
    
                type[i].onmouseover = function () {
                    for (var j = 0; j < type.length; j++) {
                        type[j].className = 'types';
                    }
                    this.className = 'types checked';
                }
                // type[i].onmouseout = function () {
                //     for (var j = 0; j < type.length; j++) {
                //         type[j].className = 'types';
                //     }
                // }
                type[i].onclick = function () {
                    ele = this.getAttribute('data-index');
                }
            }
        }
    
        $('.button').toggle(
            function () {
                $(this).css({'color': '#f00'}).html('停止');
                ydm = setInterval(function () {
    
                    // console.log(ele)
                    switch (ele) {
                        case '0' :
                            index = Math.floor(Math.random() * names.length);
                            val = names[index];
                            $('#ko').css({'color': '#33FFFF'}).html(val);
                            break;
                        case '1' :
                            index = Math.floor(Math.random() * a1.length);
                            val = a1[index];
                            $('#ko').css({'color': '#33FFFF'}).html(val);
                            break;
                        case '2' :
                            index = Math.floor(Math.random() * a2.length);
                            val = a2[index];
                            $('#ko').css({'color': '#33FFFF'}).html(val);
                            break;
                        case '3' :
                            index = Math.floor(Math.random() * a3.length);
                            val = a3[index];
                            $('#ko').css({'color': '#33FFFF'}).html(val);
                            break;
                        case '4' :
                            index = Math.floor(Math.random() * a4.length);
                            val = a4[index];
                            $('#ko').css({'color': '#33FFFF'}).html(val);
                            break;
                    }
                    ;
    
                }, 50)
            },
    
            function () {
                $(this).css({'color': '#fff'}).html('开始');
                $('#ko').css({'color': '#00CC00'});
                // 停止执行事件ydm
                clearInterval(ydm);
                newarr()
            }
        );
    
        function newarr() {
            alert(val)
            names = jQuery.grep(names, function (a) {
                return a !== val;
            });
            a1 = jQuery.grep(a1, function (a) {
                return a !== val;
            });
            a2 = jQuery.grep(a2, function (a) {
                return a !== val;
            });
            a3 = jQuery.grep(a3, function (a) {
                return a !== val;
            });
            a4 = jQuery.grep(a4, function (a) {
                return a !== val;
            });
        }
    
        $(function () {
            getType();
        })
    
    </script>
    <div style="text-align:center;">
        <p>更多源码:<a href="http://www.mycodes.net/" target="_blank">源码之家</a></p>
    </div>
    </body>
    </html>
  • 相关阅读:
    常见常用的CSS
    Js删除数组函数
    使用CSS让多出来的字变为省略号
    CSS缩写的样式
    mac下安装nginx
    ubuntu下程序员常用命令大全
    vue.js实现瀑布流之vue-waterfall-easy
    vue.js常见的报错信息及其解决方法的记录
    laravel5.4生成验证码
    java算法之超级丑数
  • 原文地址:https://www.cnblogs.com/LEPENGYANG/p/15530585.html
Copyright © 2011-2022 走看看