2022-8-25 第七小组学习日记 (day49)网上点餐系统

面向没有对象的程序猿

已于 2022-10-22 13:12:12 修改

阅读量143

点赞数

分类专栏： Web前端文章标签： html 前端 servlet css javascript

于 2022-08-26 23:45:47 首次发布

本文链接：https://blog.csdn.net/weixin_56982770/article/details/126541677

版权

Web前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

制作网上点餐系统

需求：
1、点击查看订单：
可口可乐-----2-----8
米饭2两------2-----4

总价：12
2、清空订单就是清空
3、结账：
出现一个带有确认和取消的弹窗，
弹窗上要有已选的菜品，出现订单信息。
点击确定，结账。
可以自定义一些结账的规则：起送价30，
满50-1。

需要注意的几种情况：
1、订单的显示：
可口可乐----2-----8
2、结账，如果结账成功，点击查看订单，订单要清空
3、上来就结账

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>网上点餐</title>
        <style>
            /* 背景图 */
            *{
                background-image: url("XM}O$EW7]WRPWSY`M35P0VO.png");
            }
            /* 菜单类 */
            .bo{
                font-family: 华文行楷;
                width: 430px;
                background-image: none;
                background-color: rgb(158, 154, 84);
                margin-left: 570px;
                margin-top: 100px;
            }
            /* 覆盖背景 */
            .bo>*{
                background-image: none;
            }
            /* 标正选项 */
            p{
                margin-left: 20px;
            }
            /* 标正大标题 */
            h1{
                font-family: 华文行楷;
                margin-left: 100px;
            }
            /* 标正小标题 */
            h3{
                font-family: 华文行楷;
                margin-left: 200px
            }
            /* 标正按钮 */
            button{
                font-family: 华文行楷;
                margin-left: 30px;
                width: 100px;
                margin-bottom: 20px;
            }
            /* 按钮覆盖背景 */
            input{
                background-image: none;
                width: 100px;
            }
           
        </style>
    </head>
    <body class="bo">
    <!-- 菜单 -->
    <br>
        <h1>黄家御膳</h1>
        <h3>菜单</h3>
        <p>
            南宁老友粉------￥10       数量：      <input type="number" id="a1" value="0" min="0" onblur="panduan()">
        </p>
        <p>
            蒲庙生榨粉------￥10        数量：      <input type="number" id="a2" value="0" min="0" onblur="panduan()">
        </p>
        <p>
            &nbsp;&nbsp;&nbsp;横县鱼生------￥20       数量：      <input type="number" id="a3" value="0" min="0" onblur="panduan()">
        </p>
        <p>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;白斩鸡------￥20       数量：      <input type="number" id="a4" value="0" min="0" onblur="panduan()">
        </p>
        <p>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;烧鸭------￥30       数量：      <input type="number" id="a5" value="0" min="0" onblur="panduan()">
        </p>
    <br>
    <!-- 按钮 -->    
        <button onclick="watch()">查看订单</button>
        <button onclick="del()">清空订单</button>
        <button id="cal" onclick="cal()">结账</button>

         <script>
            let arr1 = ["南宁老友粉","蒲庙生榨粉","横县鱼生","白斩鸡","烧鸭"];
            var food1 = document.querySelector("#a1").value;
            var food2 = document.querySelector("#a2").value;
            var food3 = document.querySelector("#a3").value;
            var food4 = document.querySelector("#a4").value;
            var food5 = document.querySelector("#a5").value;
            let arr2 = [food1,food2,food3,food4,food5];
            let arr3 = [food1*10,food2*10,food3*20,food4*20,food5*30];
        // 查看订单
            function watch() {
            //var能改
            var food1 = document.querySelector("#a1").value;
            var food2 = document.querySelector("#a2").value;
            var food3 = document.querySelector("#a3").value;
            var food4 = document.querySelector("#a4").value;
            var food5 = document.querySelector("#a5").value;
            let arr2 = [food1,food2,food3,food4,food5];
            let arr3 = [food1*10,food2*10,food3*20,food4*20,food5*30];
                let flag ="";
                // i是下标
                for (let i = 0; i < arr1.length; i++) {
                    if (arr2[i]==0) {
                        continue;
                    }
                    flag+=arr1[i]+"---------------"+arr2[i]+"个--------共"+arr3[i]+"元\n"
                }
                if (flag=="") {
                    flag="您还未点餐，请先点餐。";
                }
                // 警示框
                alert(flag);
            }
        // 删除订单
            function del() {
            let food1 = document.querySelector("#a1");
            let food2 = document.querySelector("#a2");
            let food3 = document.querySelector("#a3");
            let food4 = document.querySelector("#a4");
            let food5 = document.querySelector("#a5");
            food1.value = "0";
            food2.value = "0";
            food3.value = "0";
            food4.value = "0";
            food5.value = "0";
            }
        // 结账
            function cal() {
            var food1 = document.querySelector("#a1").value;
            var food2 = document.querySelector("#a2").value;
            var food3 = document.querySelector("#a3").value;
            var food4 = document.querySelector("#a4").value;
            var food5 = document.querySelector("#a5").value;
            let arr2 = [food1,food2,food3,food4,food5];
            let arr3 = [food1*10,food2*10,food3*20,food4*20,food5*30];
                let flag ="";
                // for循环逐步添加
                for (let i = 0; i < arr1.length; i++) {
                    if (arr2[i]==0) {
                        continue;
                    }
                    flag+=arr1[i]+"---------------"+arr2[i]+"个--------共"+arr3[i]+"元\n"
                }
                if (flag=="") {
                    flag="您还未点餐，请先点餐。";
                    alert(flag);
                    return;
                }
                let ff = arr3[0]+arr3[1]+arr3[2]+arr3[3];
                flag+="总价格为："+ff+"元";
                if (ff<30) {
                    flag+="\n"+"您的订单未达到配送标准，请继续点单。";
                    confirm(flag);
                    return;
                }
                // 结账后删除
                let i = confirm(flag);
                if (i) {
                    del();
                }
            }

            
                function panduan(){
                    var food1 = document.querySelector("#a1");
                    var food2 = document.querySelector("#a2");
                    var food3 = document.querySelector("#a3");
                    var food4 = document.querySelector("#a4");
                    var food5 = document.querySelector("#a5");
                    if (food1.value<0) {
                        alert("份数不能为负数");
                        food1.value = 0;
                    }
                    else if(food2.value<0){
                        alert("份数不能为负数");
                        food2.value = 0;
                    }
                    else if(food3.value<0){
                        alert("份数不能为负数");
                        food3.value = 0;
                    }
                    else if(food4.value<0){
                        alert("份数不能为负数");
                        food4.value = 0;
                    }
                    else if(food5.value<0){
                        alert("份数不能为负数");
                        food4.value = 0;
                    }
                }
            
         </script>
    </body>
</html>

初始界面：

查询界面：

结账界面：

结账后自动清零

没到配送标准界面：

份数不为0界面：

总结

今天制作的网上点餐系统过程相当艰难，本来制作出简单界面，在同学帮助下进行终极优化（对我而言），今天的作业将HTML5、CSS、JS的知识通通用上了，将之前的知识综合应用，漏掉的知识在这一题上得到充分复习和应用，中间for循环将结果输出有点懵，其他地方还行

面向没有对象的程序猿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2022-8-25 第七小组学习日记 (day49)网上点餐系统

今天制作的网上点餐系统过程相当艰难，本来制作出简单界面，在同学帮助下进行终极优化（对我而言），今天的作业将HTML5、CSS、JS的知识通通用上了，将之前的知识综合应用，漏掉的知识在这一题上得到充分复习和应用，中间for循环将结果输出有点懵，其他地方还行...............
复制链接

扫一扫