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

    制作网上点餐系统

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

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

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

    1. html>
    2. <html lang="en">
    3.     <head>
    4.         <meta charset="UTF-8">
    5.         <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.         <title>网上点餐title>
    8.         <style>
    9.             /* 背景图 */
    10.             *{
    11.                 background-image: url("XM}O$EW7]WRPWSY`M35P0VO.png");
    12.             }
    13.             /* 菜单类 */
    14.             .bo{
    15.                 font-family: 华文行楷;
    16.                 width: 430px;
    17.                 background-image: none;
    18.                 background-color: rgb(158, 154, 84);
    19.                 margin-left: 570px;
    20.                 margin-top: 100px;
    21.             }
    22.             /* 覆盖背景 */
    23.             .bo>*{
    24.                 background-image: none;
    25.             }
    26.             /* 标正选项 */
    27.             p{
    28.                 margin-left: 20px;
    29.             }
    30.             /* 标正大标题 */
    31.             h1{
    32.                 font-family: 华文行楷;
    33.                 margin-left: 100px;
    34.             }
    35.             /* 标正小标题 */
    36.             h3{
    37.                 font-family: 华文行楷;
    38.                 margin-left: 200px
    39.             }
    40.             /* 标正按钮 */
    41.             button{
    42.                 font-family: 华文行楷;
    43.                 margin-left: 30px;
    44.                 width: 100px;
    45.                 margin-bottom: 20px;
    46.             }
    47.             /* 按钮覆盖背景 */
    48.             input{
    49.                 background-image: none;
    50.                 width: 100px;
    51.             }
    52.            
    53.         style>
    54.     head>
    55.     <body class="bo">
    56.     
    57.     <br>
    58.         <h1>黄家御膳h1>
    59.         <h3>菜单h3>
    60.         <p>
    61.             南宁老友粉------￥10       数量：      <input type="number" id="a1" value="0" min="0" onblur="panduan()">
    62.         p>
    63.         <p>
    64.             蒲庙生榨粉------￥10        数量：      <input type="number" id="a2" value="0" min="0" onblur="panduan()">
    65.         p>
    66.         <p>
    67.                横县鱼生------￥20       数量：      <input type="number" id="a3" value="0" min="0" onblur="panduan()">
    68.         p>
    69.         <p>
    70.                    白斩鸡------￥20       数量：      <input type="number" id="a4" value="0" min="0" onblur="panduan()">
    71.         p>
    72.         <p>
    73.                       烧鸭------￥30       数量：      <input type="number" id="a5" value="0" min="0" onblur="panduan()">
    74.         p>
    75.     <br>
    76.         
    77.         <button onclick="watch()">查看订单button>
    78.         <button onclick="del()">清空订单button>
    79.         <button id="cal" onclick="cal()">结账button>
    80.  
    81.          <script>
    82.             let arr1 = ["南宁老友粉","蒲庙生榨粉","横县鱼生","白斩鸡","烧鸭"];
    83.             var food1 = document.querySelector("#a1").value;
    84.             var food2 = document.querySelector("#a2").value;
    85.             var food3 = document.querySelector("#a3").value;
    86.             var food4 = document.querySelector("#a4").value;
    87.             var food5 = document.querySelector("#a5").value;
    88.             let arr2 = [food1,food2,food3,food4,food5];
    89.             let arr3 = [food1*10,food2*10,food3*20,food4*20,food5*30];
    90.         // 查看订单
    91.             function watch() {
    92.             //var能改
    93.             var food1 = document.querySelector("#a1").value;
    94.             var food2 = document.querySelector("#a2").value;
    95.             var food3 = document.querySelector("#a3").value;
    96.             var food4 = document.querySelector("#a4").value;
    97.             var food5 = document.querySelector("#a5").value;
    98.             let arr2 = [food1,food2,food3,food4,food5];
    99.             let arr3 = [food1*10,food2*10,food3*20,food4*20,food5*30];
    100.                 let flag ="";
    101.                 // i是下标
    102.                 for (let i = 0; i < arr1.length; i++) {
    103.                     if (arr2[i]==0) {
    104.                         continue;
    105.                     }
    106.                     flag+=arr1[i]+"---------------"+arr2[i]+"个--------共"+arr3[i]+"元\n"
    107.                 }
    108.                 if (flag=="") {
    109.                     flag="您还未点餐，请先点餐。";
    110.                 }
    111.                 // 警示框
    112.                 alert(flag);
    113.             }
    114.         // 删除订单
    115.             function del() {
    116.             let food1 = document.querySelector("#a1");
    117.             let food2 = document.querySelector("#a2");
    118.             let food3 = document.querySelector("#a3");
    119.             let food4 = document.querySelector("#a4");
    120.             let food5 = document.querySelector("#a5");
    121.             food1.value = "0";
    122.             food2.value = "0";
    123.             food3.value = "0";
    124.             food4.value = "0";
    125.             food5.value = "0";
    126.             }
    127.         // 结账
    128.             function cal() {
    129.             var food1 = document.querySelector("#a1").value;
    130.             var food2 = document.querySelector("#a2").value;
    131.             var food3 = document.querySelector("#a3").value;
    132.             var food4 = document.querySelector("#a4").value;
    133.             var food5 = document.querySelector("#a5").value;
    134.             let arr2 = [food1,food2,food3,food4,food5];
    135.             let arr3 = [food1*10,food2*10,food3*20,food4*20,food5*30];
    136.                 let flag ="";
    137.                 // for循环逐步添加
    138.                 for (let i = 0; i < arr1.length; i++) {
    139.                     if (arr2[i]==0) {
    140.                         continue;
    141.                     }
    142.                     flag+=arr1[i]+"---------------"+arr2[i]+"个--------共"+arr3[i]+"元\n"
    143.                 }
    144.                 if (flag=="") {
    145.                     flag="您还未点餐，请先点餐。";
    146.                     alert(flag);
    147.                     return;
    148.                 }
    149.                 let ff = arr3[0]+arr3[1]+arr3[2]+arr3[3];
    150.                 flag+="总价格为："+ff+"元";
    151.                 if (ff<30) {
    152.                     flag+="\n"+"您的订单未达到配送标准，请继续点单。";
    153.                     confirm(flag);
    154.                     return;
    155.                 }
    156.                 // 结账后删除
    157.                 let i = confirm(flag);
    158.                 if (i) {
    159.                     del();
    160.                 }
    161.             }
    162.  
    163.             
    164.                 function panduan(){
    165.                     var food1 = document.querySelector("#a1");
    166.                     var food2 = document.querySelector("#a2");
    167.                     var food3 = document.querySelector("#a3");
    168.                     var food4 = document.querySelector("#a4");
    169.                     var food5 = document.querySelector("#a5");
    170.                     if (food1.value<0) {
    171.                         alert("份数不能为负数");
    172.                         food1.value = 0;
    173.                     }
    174.                     else if(food2.value<0){
    175.                         alert("份数不能为负数");
    176.                         food2.value = 0;
    177.                     }
    178.                     else if(food3.value<0){
    179.                         alert("份数不能为负数");
    180.                         food3.value = 0;
    181.                     }
    182.                     else if(food4.value<0){
    183.                         alert("份数不能为负数");
    184.                         food4.value = 0;
    185.                     }
    186.                     else if(food5.value<0){
    187.                         alert("份数不能为负数");
    188.                         food4.value = 0;
    189.                     }
    190.                 }
    191.             
    192.          script>
    193.     body>
    194. html>

    初始界面： 

    查询界面：

    结账界面：

     结账后自动清零

    没到配送标准界面：

    份数不为0界面：

    总结 

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

  • 相关阅读:
    windows系统使用docker-compose
    java计算机毕业设计-损失赔偿保险的客户情况登记及管理-源程序+mysql+系统+lw文档+远程调试
    day19 爬虫和前端
    哈希(hash)——【C++实现】
    java学习--day15（泛型、集合）
    如何使用CSS创建高级动画，这个函数必须掌握
    【数据库原理与应用（第3版）】第二章：数据模型（选择与填空）
    Java移除链表元素
    如何监控慢 SQL？
    进程的状态与转换以及组织方式
  • 原文地址：https://blog.csdn.net/weixin_56982770/article/details/126541677