使用js和json数据实现一个简单的点餐页面

于 2020-07-13 15:54:20 发布
阅读量768 收藏 7
点赞数 1
文章标签： js json
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Null_Robot/article/details/107318567
版权
本文介绍了一个基于HTML、CSS和JavaScript的德克士餐厅网页布局案例，包括响应式设计、菜单动态加载及加减购物车功能。通过绑定左侧类别，实现右侧菜单的动态更新，并利用滚动事件保持左右侧同步。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1.进行简单的布局

<div class="box">
    <div class="title">德克士</div>
    <div class="info">
        <div class="logo">
            <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=4129609614,3657034221&fm=26&gp=0.jpg" class="logoimg" alt="">
            <h4>德克士</h4>
        </div>
    </div>
    <div class="detail">
        <div class="leftbox">
            <ul class="leftmenu">

            </ul>
        </div>
        <div class="rightbox">

        </div>
    </div>
</div>

2书写css样式

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html, body {
            width: 100%;
            height: 100%;
        }

        .box {
            width: 100%;
            height: 100%;
            overflow-y: scroll;
        }

        .title {
            background-color: #009fff;
            color: #fff;
            text-align: center;
            line-height: 40px;

        }

        .info {
            position: relative;
            height: 12rem;
            border: 1px solid red;
            background: url("http://img3.imgtn.bdimg.com/it/u=1880958757,602617484&fm=26&gp=0.jpg") center no-repeat;
            background-size: cover;
        }

        .logo {
            position: absolute;
            width: 15rem;
            height: 7rem;
            margin: auto;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            text-align: center;
        }

        .logoimg {
            width: 5rem;
            border-radius: 50%;
        }

        .detail {
            width: auto;
            height: 20rem;
            border: 1px solid #cbcbcb;
            display: flex;
            flex-direction: row;
        }

        .leftbox {
            flex: 1;
            border-right: 1px solid #cbcbcb;
            box-sizing: border-box;
            overflow: hidden;
        }

        .rightbox {
            position: relative;
            flex: 4;
            overflow-y: scroll;
        }

        .rightbox::-webkit-scrollbar {
            display: none;
        }

        .leftmenu {
            height: 100%;
            overflow-y: scroll;
        }

        .leftmenu::-webkit-scrollbar {
            display: none; /* Chrome Safari */
        }

        .leftli {
            padding-left: 1rem;
            height: 3.5rem;
            line-height: 3.5rem;
            box-sizing: border-box;
            border-bottom: 1px solid #cbcbcb;
        }

        .rightmenu {
            border-bottom: 1px solid #cccccc;
        }

        .rightli {
            padding: .5rem;
            display: flex;
            flex-direction: row;
        }

        .leftdiv {
            flex: 1;
        }

        .rightdiv {
            position: relative;
            flex: 4;
            padding: 0 0.5rem;
        }

        .fimg {
            width: 5rem;
        }

        .p1 {
            font-weight: 700;
        }

        .p2 {
            font-size: .8rem;
            color: #878787;
        }

        .p3 {
            font-size: .8rem;
            color: #878787;
        }

        .small {
            position: absolute;
            right: 0;
            bottom: 0;
            width: 5rem;
            height: 1.5rem;
        }

        .jian {
            float: left;
            width: 1.5rem;
            height: 1.5rem;
            border-radius: 50%;
            border: 1px solid #000;
            font-size: 1.5rem;
            line-height: 1.5rem;
            background: #fff;
            display: none;
        }

        .num {
            display: inline-block;
            text-align: center;
            width: 2rem;
            display: none;
        }

        .jia {
            float: right;
            width: 1.5rem;
            height: 1.5rem;
            border-radius: 50%;
            border: 1px solid #000;
            font-size: 1.5rem;
            line-height: 1.5rem;
            background: #fff;
        }

        .check {
            background: #cccccc;
        }
    </style>

3.导入json数据

var food ={
        "name":"德克士",
        "logo":"",
        "bgimg":"",
        "ordo":[
            {
                "name":"满10减2"
            },
            {
                "name":"满20减5"
            },
            {
                "name":"满30减10"
            }
        ],
        "foodtype":[
            {
                "name":"热销"
            },
            {
                "name":"套餐"
            },
            {
                "name":"特色"
            },
            {
                "name":"汉堡"
            },
            {
                "name":"炸鸡"
            },
            {
                "name":"饮料"
            }
        ],
        "list":[
            {
                "info":[
                    {
                        "name":"鸡肉卷",
                        "img":"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3239751348,611359835&fm=26&gp=0.jpg",
                        "price":"2",
                        "sales":"212"
                    },
                    {
                        "name":"香辣鸡腿堡",
                        "img":"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3239751348,611359835&fm=26&gp=0.jpg",
                        "price":"2",
                        "sales":"212"
                    },
                    {
                        "name":"炸薯条",
                        "img":"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3239751348,611359835&fm=26&gp=0.jpg",
                        "price":"2",
                        "sales":"212"
                    },
                    {
                        "name":"炸翅根",
                        "img":"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3239751348,611359835&fm=26&gp=0.jpg",
                        "price":"2",
                        "sales":"212"
                    }
                ]
            },
            {
                "info":[
                    {
                        "name":"香辣鸡腿堡+可乐",
                        "img":"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3239751348,611359835&fm=26&gp=0.jpg",
                        "price":"2",
                        "sales":"212"
                    },
                    {
                        "name":"香辣鸡腿堡+炸薯条+可乐",
                        "img":"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3239751348,611359835&fm=26&gp=0.jpg",
                        "price":"2",
                        "sales":"212"
                    }
                ]
            },
            {
                "info":[
                    {
                        "name":"香芋地瓜丸",
                        "img":"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3239751348,611359835&fm=26&gp=0.jpg",
                        "price":"2",
                        "sales":"212"
                    },
                    {
                        "name":"鳕鱼条",
                        "img":"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3239751348,611359835&fm=26&gp=0.jpg",
                        "price":"2",
                        "sales":"212"
                    },
                    {
                        "name":"黑椒鸡肉",
                        "img":"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3239751348,611359835&fm=26&gp=0.jpg",
                        "price":"2",
                        "sales":"212"
                    },
                    {
                        "name":"皮蛋瘦肉粥",
                        "img":"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3239751348,611359835&fm=26&gp=0.jpg",
                        "price":"2",
                        "sales":"212"
                    },
                    {
                        "name":"浓香蛋塔",
                        "img":"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3239751348,611359835&fm=26&gp=0.jpg",
                        "price":"2",
                        "sales":"212"
                    }
                ]
            },
            {
                "info":[
                    {
                        "name":"香辣鸡腿堡",
                        "img":"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3239751348,611359835&fm=26&gp=0.jpg",
                        "price":"2",
                        "sales":"212"
                    },
                    {
                        "name":"浓香牛肉堡",
                        "img":"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3239751348,611359835&fm=26&gp=0.jpg",
                        "price":"2",
                        "sales":"212"
                    }
                ]
            },
            {
                "info":[
                    {
                        "name":"原味炸鸡",
                        "img":"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3239751348,611359835&fm=26&gp=0.jpg",
                        "price":"2",
                        "sales":"212"
                    },
                    {
                        "name":"吮指炸鸡",
                        "img":"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3239751348,611359835&fm=26&gp=0.jpg",
                        "price":"2",
                        "sales":"212"
                    }
                ]
            },
            {
                "info":[
                    {
                        "name":"可乐",
                        "img":"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3239751348,611359835&fm=26&gp=0.jpg",
                        "price":"2",
                        "sales":"212"
                    },
                    {
                        "name":"雪碧",
                        "img":"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3239751348,611359835&fm=26&gp=0.jpg",
                        "price":"2",
                        "sales":"212"
                    },
                    {
                        "name":"橙汁",
                        "img":"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3239751348,611359835&fm=26&gp=0.jpg",
                        "price":"2",
                        "sales":"212"
                    }
                ]
            }
        ]
    };

4.实现功能

 var defaultbg = null;
    /*
     * 绑定左边类别
     * */
    var menuleft = document.querySelector(".leftmenu");
    var rightbox = document.querySelector(".rightbox");
    for (var i = 0; i < food.foodtype.length; i++) {
        var liele = document.createElement("li");
        liele.className = "leftli";
        if (i == 0) {
            liele.classList.add("check");
            defaultbg = liele;
        }
        liele.innerText = food.foodtype[i].name;
        menuleft.appendChild(liele);
    }


    //使用变量记录中间index
    var centerindex = Math.floor(menuleft.children.length / 2);

    /*
     * 添加右边的对应菜单
     * */
    for (var i = 0; i < food.list.length; i++) {
        var ulright = document.createElement("ul");
        ulright.className = "rightmenu";
        rightbox.appendChild(ulright);

        for (var k = 0; k < food.list[i].info.length; k++) {
            var rightli = document.createElement("li");
            rightli.className = "rightli";
            ulright.appendChild(rightli);

            var leftdiv = document.createElement("div");
            leftdiv.className = "leftdiv";
            var rightdiv = document.createElement("div");
            rightdiv.className = "rightdiv";
            rightli.appendChild(leftdiv);
            rightli.appendChild(rightdiv);

            var img = document.createElement("img");
            img.className = "fimg";
            img.src = food.list[i].info[k].img;
            leftdiv.appendChild(img);

            var p1 = document.createElement("p");
            p1.className = "p1";
            p1.innerText = food.list[i].info[k].name;
            rightdiv.appendChild(p1);
            var p2 = document.createElement("p");
            p2.className = "p2";
            p2.innerText = "销量" + food.list[i].info[k].sales;
            rightdiv.appendChild(p2);
            var p3 = document.createElement("p");
            p3.className = "p3";
            p3.setAttribute("data-price", food.list[i].info[k].price)
            p3.innerText = "单价：" + food.list[i].info[k].price;
            rightdiv.appendChild(p3);

            //创建加减号
            var small = document.createElement("div");
            small.className = "small";
            rightdiv.appendChild(small);

            var jian = document.createElement("button");
            jian.className = "jian";
            jian.innerText = "-";
            small.appendChild(jian);
            var span = document.createElement("span");
            span.className = "num";
            span.innerText = "0";
            small.appendChild(span);
            var jia = document.createElement("button");
            jia.className = "jia";
            jia.innerText = "+";
            small.appendChild(jia);
        }
    }

    /*
     * 获取左边所有的li
     * */
    var leftliele = document.getElementsByClassName("leftli");
    var rightmenu = document.getElementsByClassName("rightmenu");
    var rightbox = document.getElementsByClassName("rightbox");
    var jia = document.getElementsByClassName("jia");
    var jian = document.getElementsByClassName("jian");
    var num = document.getElementsByClassName("num");
    for (var i = 0; i < leftliele.length; i++) {
        leftliele[i].index = i;
        leftliele[i].onclick = function () {
            defaultbg.classList.remove("check");
            this.classList.add("check");
            defaultbg = this;


            rightbox[0].scrollTop = rightmenu[this.index].offsetTop;
        }
    }
    /*
     * rightbox  添加滚动事件
     * */
    rightbox[0].onscroll = function () {
        for (var i = 0; i < rightmenu.length; i++) {
            /*
             * 下面这个代码是确认区间的  根据区间获取当前ul的index
             * 那么这个index就是对应左边卡的index
             * */
            if (this.scrollTop >= rightmenu[i].offsetTop && this.scrollTop < rightmenu[i].offsetHeight + rightmenu[i].offsetTop) {
                if (defaultbg.classList.contains("check")) {
                    defaultbg.classList.remove("check");
                    leftliele[i].classList.add("check");
                    defaultbg = leftliele[i];
                }
                //检测当前索引和中间索引的值
                if (i > centerindex) {
                    //左侧的滚动条自动到底部
                    //  里面内容的高-父元素的高
                    menuleft.scrollTop = menuleft.scrollHeight - menuleft.offsetHeight;
                }
                else {
                    //左侧的滚动条自动到顶部
                    menuleft.scrollTop = 0;
                }
            }
        }
    }
    /*
     * 加减功能
     * */

    //定义购物车集合
    var cart = [];
    var p1 = document.getElementsByClassName("p1");
    var p3 = document.getElementsByClassName("p3");
    for (var i = 0; i < jia.length; i++) {
        jia[i].index = i;
        jia[i].onclick = function () {
            jian[this.index].style.display = "block";
            num[this.index].style.display = "inline-block";
            var numdata = ++num[this.index].innerText;
            //创建json
            var s = {
                "name": p1[this.index].innerText,
                "price": p3[this.index].getAttribute("data-price"),
                "num": numdata
            }
            num[this.index].innerText = numdata;
            checkshop(s);
        }
        jian[i].index = i;
        jian[i].onclick = function () {

            var numdata = --num[this.index].innerText;
            //创建json
            var s = {
                "name": p1[this.index].innerText,
                "price": p3[this.index].getAttribute("data-price"),
                "num": numdata
            }
            num[this.index].innerText = numdata;
            if (numdata <= 0) {
                jian[this.index].style.display = "none";
                num[this.index].style.display = "none";
            }
            checkshop(s);
        }
    }

    /*
     * 检测购物车数组里面是否已经存在该商品
     * */
    function checkshop(shop) {
        //先检测
        var ishas = false;
        for (var i = 0; i < cart.length; i++) {
            if (cart[i].name == shop.name) {
                ishas = true;
                //修改数量
                cart[i].num = shop.num;
            }
            //如果当前商品数量为0  直接删除
            if (cart[i].name == shop.name && shop.num == 0) {
                cart.splice(i, 1); //splice  街区数组中的元素   start  length  该方法街区之后原数组会受影响
            }
        }
        if (!ishas) {
            cart.push(shop);//push  直接添加到数组里面
        }

        console.log(cart);
    }

5.实现效果如下
在这里插入图片描述

Null_Robot
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值