转载

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

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>

 

正文到此结束
本文目录