基于HTML+JS实现线上点单平台

最新推荐文章于 2023-08-21 20:12:47 发布
置顶 最新推荐文章于 2023-08-21 20:12:47 发布
阅读量1.4k 收藏 1
点赞数 1
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44364444/article/details/104042669
版权

HTML部分：

<!doctype html>
<html lang="zh">

<head>
    <title>喜茶</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>

<body>
    <!-- 容器 -->
    <div class="container-fluid px-0">
        <!-- 展板 -->
        <div class="jumbotron px-0 py-2 bg-success">
            <h1 class="display-3 text-white ml-5">喜茶</h1>
            <p class="lead text-white ml-5"><span class="badge-pill badge-danger h6">线上点单平台</span></p>
        </div>
    </div>

    <div class="container-fluil mx-3">
        <!-- 下拉菜单行 -->
        <div class="row">
            <div class="col-lg-6">
                <div class="row">
                    <div class="col-lg-6">
                        <div class="form-group">
                            <label for="">选择饮品</label>
                            <select class="form-control d" name="" id="">
                                <option>红茶</option>
                                <option>绿茶</option>
                                <option>乌龙茶</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="form-group ">
                            <label for="">规格</label>
                            <select class="form-control d1" name="" id="">
                                <option>中杯</option>
                                <option>大杯</option>
                                <option>小杯</option>
                            </select>
                        </div>
                    </div>
                </div>

                <!-- <div class="btn-group btn-group-toggle my-3" data-toggle="buttons">
                        <label class="btn btn-outline-danger col-lg-2 ml-lg-4 mr-lg-5" >
                            <input type="radio" name="options" id="option1"> 糖
                        </label>
                        <label class="btn btn-outline-danger col-lg-2 ml-lg-5 mr-lg-4" >
                            <input type="radio" name="options" id="option2"> 半糖
                        </label>
                        <label class="btn btn-outline-danger col-lg-2 ml-lg-5 mr-lg-5" >
                            <input type="radio" name="options" id="option2"> 少糖
                        </label>
                        <label class="btn btn-outline-danger col-lg-2 mx-5" >
                            <input type="radio" name="options" id="option3"> 无糖
                        </label>
                    </div> -->
                <!-- 按钮行-->
                <div class="row">


                    <div class="btn-group btn-group-toggle my-3" data-toggle="buttons">
                        <label class="btn btn-outline-danger col-lg-2 mx-5">
                            <input type="radio" name="options" id="option1" value="糖"> 糖
                        </label>
                        <label class="btn btn-outline-danger col-lg-2 mx-5">
                            <input type="radio" name="options" id="option2" value="少糖"> 少糖
                        </label>
                        <label class="btn btn-outline-danger col-lg-2 mx-5">
                            <input type="radio" name="options" id="option3" value="半糖"> 半糖
                        </label>
                        <label class="btn btn-outline-danger col-lg-2 mx-5">
                            <input type="radio" name="options" id="option3" value="无糖"> 无糖
                        </label>
                    </div>
                </div>
                <!-- 单选行 -->
                <div class="row">
                    <div class="col-lg-4">
                        <div class="form-group">
                            <label for=""></label>
                            <input type="radio" name="xuanze" class="" value="常温">
                            <small id="" class="h6">常温</small>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="form-group">
                            <label for=""></label>
                            <input type="radio" name="xuanze" value="热">
                            <small id="helpId" class="h6">热</small>
                        </div>
                    </div>
                    <div class="col-lg-4">


                        <div class="form-check form-check-inline">
                            <label class="form-check-label">
                                <input class="form-check-input" type="radio" name="xuanze" id="" value="加冰">加冰
                            </label>
                        </div>
                    </div>
                </div>
                <div class="row">


                    <div class="btn-group btn-group-toggle my-3" data-toggle="buttons">
                        <label class="btn btn-outline-dark col-lg-2 mx-5">
                            <input type="checkbox" name="liao" id="option1" value="牛奶"> 牛奶
                        </label>
                        <label class="btn btn-outline-danger col-lg-2 mx-5">
                            <input type="checkbox" name="liao" id="option2" value="红豆"> 红豆
                        </label>
                        <label class="btn btn-outline-primary col-lg-2 mx-5">
                            <input type="checkbox" name="liao" id="option3" value="布丁"> 布丁
                        </label>
                        <label class="btn btn-outline-success col-lg-2 mx-5">
                            <input type="checkbox" name="liao" id="option4" value="抹茶"> 抹茶
                        </label>
                    </div>
                </div>

               

                <div class="row mt-5">
                    <div class="col-lg-12">
                        <button type="button" class="btn btn-danger" style="width: 100%;">下单</button>
                    </div>
                </div>
            </div>
            <!-- 表格 -->
            <div class="col-lg-6">
                <table class="table">
                    <thead>
                        <tr>
                            <th>饮品</th>
                            <th>规格</th>
                            <th>糖</th>
                            <th>温度</th>
                            <th>辅料</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>


                        <tr>
                            <td scope="row">红茶</td>
                            <td>大杯</td>
                            <td>半塘</td>
                            <td>热</td>
                            <td>

                                <span class=" badge badge-pill badge-danger mr-1" style="font-size: 10px;">红豆</span>
                                <span class=" badge badge-pill badge-dark mr-1" style="font-size: 10px;">牛奶</span>
                                <span class=" badge badge-pill badge-primary mr-1" style="font-size: 10px;">布丁</span>
                            </td>
                            <td><button type="button" class="btn btn-primary ">出货</button></td>
                        </tr>



                    </tbody>
                </table>
            </div>
        </div>
    </div>

JS部分：

<script>
        let tbody = document.querySelector('tbody');
        //获得下单按钮



        // console.log(btn);
        // 给下单按钮添加点击事件
        document.querySelector('.btn-danger').addEventListener(
            'click',
            () => {
                let tr = document.createElement('tr');
                // 创建6个td
                let td1 = document.createElement('td');
                let td2 = document.createElement('td');
                let td3 = document.createElement('td');
                let td4 = document.createElement('td');
                let td5 = document.createElement('td');
                let td6 = document.createElement('td');







                // 获取下单表的信息
                let s1 = document.querySelector('.d');
                td1.textContent = s1.value;
                let s2 = document.querySelector('.d1');
                td2.textContent = s2.value;

                let s3 = document.getElementsByName('options');
                for (const a of s3) {
                    // console.log(a.value);

                    if (a.checked == true) {
                        td3.textContent = a.value;
                        // console.log(a.value);


                    }

                }
                let s4 = document.getElementsByName('xuanze');
                for (const s of s4) {
                    if (s.checked == true) {
                        td4.textContent = s.value;

                    }

                }

                let s5 = document.getElementsByName('liao');

                for (const b of s5) {
                    if (b.checked == true) {

                        let span = document.createElement('span');
                        span.textContent = b.value;
                        if (b.value == '牛奶') {
                            span.classList.add('badge', 'badge-pill', 'badge-dark', 'mr-1');
                        } else if (b.value == '红豆') {
                            span.classList.add('badge', 'badge-pill', 'badge-danger', 'mr-1');
                        } else if (b.value == '布丁') {
                            span.classList.add('badge', 'badge-pill', 'badge-primary', 'mr-1');
                        } else {
                            span.classList.add('badge', 'badge-pill', 'badge-success', 'mr-1');
                        }

                        td5.append(span);

                    }

                }










                // 创建出货按钮
                let btn1 = document.createElement('button');
                // 添加样式
                btn1.classList.add('btn', 'btn-primary');
                // 添加内容
                btn1.textContent = '出货';
                btn1.addEventListener('click', re(btn1));


                td6.append(btn1);
                tr.append(td1, td2, td3, td4, td5, td6);
                tbody.append(tr);







            }
        );

        let sh = document.querySelector('.btn-primary');
        // console.log(sh);

        sh.addEventListener(
            'click', 
                re(sh)
           
        );


// 重点
        function re(e) {
            return function () {
                e.parentElement.parentElement.remove();
                alert('出货成功');
            }

        }
        // function re(e) {
           
        //         e.parentElement.parentElement.remove();
        //         alert('出货成功');
         

        // }







    </script>



    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>

 

最小的帆也能远航
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
蓝色兼职招聘网站HTML模板 整站模板 静态HTML模板
01-03
蓝色兼职招聘网站HTML模板，界面简洁，全套模板，包括首页、事务公告、联系我们、注册、登录、密码修改等网站模板页面。
第八次网页前端培训笔记(HTML)
m0_53729875的博客
02-12 585
一、获取表单 1. document-getElementById("id属性值"); 通过from标签的id属性值获取表单对象 2. document.表单的name属性值; 通过表单的name属性值获取表单对象 3. document.forms[下标]; 通过指定下标获取表单元素 ...
html点击菜单显示详情效果,jQuery实现菜单显示效果
weixin_35500243的博客
06-03 524
前言上一篇博客更新了在页面中可以像Excel表格一样输入的表格，这篇博客介绍一下我们经常可以在各大网站看到的菜单栏显示效果的程序。内容显示效果：照例，先上代码，HTML代码：jQuery实践3-菜单效果菜单项1子菜单项1.1子菜单项1.2子菜单项1.3菜单项2子菜单项2.1子菜单项2.2子菜单项2.3菜单项3子菜单项3.1子菜单项3.2子菜单项3.3菜单项1子菜单项1.1子菜单项1.2子菜单项1....
html初级选择题及答案,web前端开发初级考试,附答案
weixin_35092037的博客
06-05 3832
一、单选题 (共 40 道试题,共 80 分)1.下列哪个为相对定位方式？A.position:relative; B.position:absolute; C.position:fixed; D.position:static2.p标签内一般都写什么?()A.图片B.链接C.文本D.什么都不写3.CSS样式，怎样来表示HTML元素的class属性，用下面哪一个来定义？A.{} B.id C.# ...
html5实现单点登录,HTML5 端单点登录
weixin_34191434的博客
06-08 1127
3.1 新建 login.html在 FineBI 工程%BI_HOME%/webapps/webroot/目录下，新建login.html文件，具体代码如下：注1：代码中的 URL、用户名、密码需要根据实际使用情况进行修改。IP 不可写 localhost。注2：HTML5 移动端展现插件版本为 V10.2.0 之前，移动端登录需要带__device__=iPhone&terminal=...
基于Jsp+Servlet+纯（HTML+CSS+JavaScript）实现的学生成绩管理系统
10-31
通过JavaWeb技术并结合MySQL来编写的基于Jsp+Servlet+纯（HTML+CSS+JavaScript）实现的学生成绩管理系统。（IDEA实现，服务器Tomcat10.0.22） zip包内容有全部完整代码（前后端代码+数据库创建）
用js、html书写大型购物车页面之结算账单
wyhcczz的博客
09-13 3335
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>购物车功能的具体实现</title> <link rel="stylesheet" type="text/css" href="../css/shopping.css"/> <link rel="stylesheet" type="text/css" href="../c.
HTML+JS（购物车案例）
2301_77638787的博客
08-21 1666
尽量帮助初学者减少初级的困难，其实一旦掌握了之后，会发现它其实是非常容易
有趣的HTML实例（十三） 咖啡选择（css+js）
好好读书
02-17 1237
有趣的HTML实例（十三） 咖啡选择（css+js）
电商系统——订单页面展示
weixin_44843345的博客
04-23 3414
两张订单表：1. order ：主要存储用户与订单之间的关系 ，2.order_item：存储订单与商品信息， 利用第一张表获取该用户所有订单列表，然后利用第二张表获取该订单所有商品信息。 Html+SpringBoot+Mysql 电商用户订单页展示 一、数据库表 order表 order_item表 二、SpringBoot代码 xml文件 order <select id="selectByExample" pa...
一款小程序线上点餐源代码
04-10
该DEMO主要分为几个模块，首页简单授权弹窗，门店列表展示，选择门店进入门店中（菜单栏切换选购商品添加到购物车）,购物车计算加减商品数量以及金额。
基于SpringBoot+Vue的线上买菜系统（Java毕业设计，包括源码、数据库、教程）.zip
02-07
Java 毕业设计，Java 课程设计，基于 SpringBoot 开发的，含有代码注释，新手也可看懂。毕业设计、期末大作业、课程设计、高分必看，下载下来，简单部署，就可以使用。 包含：项目源码、数据库脚本、软件工具等，...
基于SpringBoot+Mybatis的线上网络文件网盘管理系统源码+sql数据库(毕业设计).zip
06-13
用了技术框架： HTML+CSS+JavaScript+jsp+mysql+Spring+mybatis+Spring boot 管理员账号/密码：admin/123456 用户账号/密码： lisi1234/123456 ## 运行环境:jdk1.8/jdk1.9 ## IDE环境： Eclipse,Myeclipse,IDEA都...
Java毕业设计-基于SpringBoot+Vue的线上辅导班系统的开发与设计（附源码，数据库,教程）.zip
最新发布
03-04
Java 毕业设计，Java 课程设计，基于 SpringBoot 开发的，含有代码注释，新手也可看懂。毕业设计、期末大作业、课程设计、高分必看，下载下来，简单部署，就可以使用。 包含：项目源码、数据库脚本、软件工具等，...
JS的日期操作：String转date日期格式、求日期差
可小辉的博客
11-14 2527
一、在js中String类型转成date格式 var date = new Date("2021-11-14 14:58:43"); 二、date转String类型 var date = new Date();//获取当前日期时间 　　var year = date.getFullYear();//年 　　var month = date.getMonth();//月 　　var day = date.getDate();//日 　　var hours = date.getHours();//时
Ajax向后台传递数组问题的解决方法
可小辉的博客
02-08 1114
今天重温了一个问题，jQuery.ajax向后台传递一个数组，而在后台接收不到该值。 前台js方法部分代码如下： //创建一个测试数组 var boxIds = new Array(); boxIds.push(12182); boxIds.push(12183); boxIds.push(12184); //向后台交互 $.ajax({ url: "/xxx", type: "GET", data: { "boxIds": boxIds, "boxT
JS中常用的输出方式
可小辉的博客
11-15 485
1、alert("要输出的内容"); 在浏览器中弹出一个对话框,然后把要输出的内容展示出来 alert都是把要输出的内容首先转换为字符串然后在输出的 2、document.write("要输出的内容"); 直接的在页面中展示输出的内容 3、console.log("要输出的内容"); 在控制台输出内容 4、value ->给文本框(表单元素)赋值内容 获取文本框中(表单元素)的内容 document.getElementById("search").value = "要给#se..
JavaScript中函数和内部对象详解
可小辉的博客
12-03 456
1.流程控制 if判断 'use strict' var age=3; if(age>3){//第一个判断 alert("haha"); }else if (age<5){//第二个判断 alert("kuwa") }else {//否则 alert("kuwa~"); } while判断，避免程序死循环 var
基于ssm框架的线上花店详细步骤
05-28
好的，下面是基于SSM框架的线上花店的详细步骤： 1. 环境搭建：安装JDK、Tomcat、MySQL等软件，并配置好环境变量。 2. 创建项目：使用Maven创建一个基于SSM框架的web项目。 3. 数据库设计：设计数据库表，并使用MySQL Workbench等工具创建表结构。 4. 配置数据源：在Spring的配置文件中配置数据源，以便在DAO层中使用。 5. 创建实体类：根据数据库表结构创建实体类，并在类中定义属性和对应的getter和setter方法。 6. 创建DAO层：创建数据访问层的接口和实现类，并在实现类中编写数据库操作方法。 7. 创建Service层：创建服务层的接口和实现类，服务层主要负责业务逻辑的处理。 8. 创建Controller层：创建控制层的接口和实现类，控制层主要负责接收用户请求并调用服务层进行处理。 9. 配置Spring MVC：在Spring的配置文件中配置Spring MVC框架，以便在控制层中使用。 10. 创建前端页面：使用HTML、CSS、JavaScript等技术创建前端页面，并与后端进行交互。 11. 部署项目：将项目打包为war包，并部署到Tomcat中运行。 以上就是基于SSM框架的线上花店的详细步骤，希望能对你有所帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值