尝试用js和jQuery实现一个简单的商品购买系统

hyzzhmbb

已于 2024-01-24 09:25:00 修改

阅读量625

点赞数 3

文章标签： javascript jquery 前端

于 2023-05-26 10:59:40 首次发布

本文链接：https://blog.csdn.net/hyzzhmbb/article/details/130881259

版权

一、首先渲染出商品列表数据

通过拼接和循环就得到表格了

添加一点简单的css样式让表格看得过去

大概效果如图所示

这一步我们先获取当前点击的节点信息，然后通过js生成节点，再拼接到购物车表头下面

在做个判断，

先建立一个空数组，因为商品的编号是唯一的，所以点购买商品就判断一下数组里有没有商品的编号，有就value+1，否则就生成新的一行

通过some方法判断数组里的数有没有重复

加号和减号按钮绑定事件

因为是渲染生产的，所有我直接给按钮里绑定了

小计通过获取当前这一行的value和单价相乘，总价则获取所有的小计相加

通过数组做累加，每次改变都调用一次

这里通过正则和if判断一下就行，给输入框绑定事件

当然为了总价小计不出错报错时给value更改为1

删除按钮通过绑定事件来找到当前行在删除就行，再调用一下总价函数,还要记得清除数组里对应的数据

这样一个简单的商品购买系统就完成了

完整代码

<!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>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        table {
            border-collapse: collapse;
            margin: 0 auto;
            text-align: center;
        }

        thead {
            background-color: #888;
        }

        th {
            width: 100px;
            height: 40px;
        }

        td {
            width: 100px;
            height: 40px;
        }

        .car {
            margin: 20px auto;
            width: 604px;
        }

        input {
            outline: none;
        }

        .car input {
            width: 50%;
        }

        .cz>button {
            width: 15px;
            height: 15px;
            line-height: 15px;
            text-align: center;
            margin: 2px;
        }

        #totle_span {
            font-size: 18px;
            font-weight: 500;
        }
    </style>
    <script src="./piugin/jquery.js"></script>
</head>

<body>
    <input type="text" onclick="">
    <script>
        var goods = [
            {
                "goodsId": "1000100", "goodsName": "方便面",
                "goodsPrice": 2.5, "address": "河南", "goodsDate": "2020-01-01",
            },
            {
                "goodsId": "1000101", "goodsName": "火腿肠",
                "goodsPrice": 3, "address": "河北", "goodsDate": "2021-01-01"
            },
            {
                "goodsId": "1000102", "goodsName": "面包",
                "goodsPrice": 5, "address": "湖南", "goodsDate": "2020-03-01"
            },
            {
                "goodsId": "1000103", "goodsName": "冰红茶",
                "goodsPrice": 3, "address": "福建", "goodsDate": "2020-05-01"
            },
            {
                "goodsId": "1000104", "goodsName": "绿茶",
                "goodsPrice": 3, "address": "江西", "goodsDate": "2020-01-02"
            },
            {
                "goodsId": "1000105", "goodsName": "可口可乐",
                "goodsPrice": 3, "address": "湖北", "goodsDate": "2020-01-05"
            }
        ]
        //创建节点
        let body = document.querySelector("body");
        //渲染表格
        let tablestr = `
            <table border="1">
       <thead>
           <tr>
               <th>商品编号</th>
               <th>商品名称</th>
               <th>商品单价</th>
               <th>商品产地</th>
                <th>生产日期</th>
                <th>操作</th>
            </tr>
         </thead>`
        for (let i = 0; i < goods.length; i++) {
            tablestr += `
            <tr>
                    <td>${goods[i].goodsId}</td>
                    <td>${goods[i].goodsName}</td>
                     <td>${goods[i].goodsPrice}</td>
                    <td>${goods[i].address}</td>
                     <td>${goods[i].goodsDate}</td>
                     <td><button onclick="add(this)">购买商品</button></td>
                 </tr>
            `
        }
        let tend = `</table>`
        tablestr+=tend
        body.innerHTML = tablestr
        //购物车头部
        let shoppinghead = `<div class="car">
        <table border="1" cellspacing="0" id="TB">
            <tr>
                <th width="200">商品名字</th>
                <th width="150">商品名称</th>
                <th>商品单价</th>
                <th>商品数量</th>
                <th>小计</th>
                <th>操作</th>
            </tr>
        </table>
        <div>合计:<span id="totle_span"></span></div>
    </div>`
        body.innerHTML += shoppinghead
        //获取节点
        let shopping_ = $(".car>div");
        //购物车列表数据
        var shopCartArr = [];
        //点击事件添加节点
        function add(th) {
            let a = $(th).parent().siblings().first().html()//编号
            let b = $(th).parent().siblings().first().next().html()//名字
            let c = $(th).parent().siblings().first().next().next().html()//单价
            //总价的span
            let tot_s = document.querySelector("#totle_span");
            //购物商品节点
            let shopping = `<tr>
                    <td>${a}</td>
                    <td>${b}</td>
                     <td>${c}</td>
                    <td class="cz"><button onclick="addval(this)">+</button><input type="text" class="t${a}" value="1" oninput="inpnum(this)"><button onclick="reduce(this)">-</button></td>
                    <td class="sub">${c}</td>
                     <td><button onclick="del(this)">删除商品</button></td>
                 </tr>`
            //如果商品已经添加，则value+1
            let res = shopCartArr.some((ele, idx, arr) => { return ele == a })
            // console.log(res);
            if (res) {
                $(`.t${a}`).prop("value", Number($(`.t${a}`).val()) + 1);
                //小计
                let total = Number($(`.t${a}`).val()) * Number(c)
                let sub = document.querySelector(`.t${a}`).parentElement.nextElementSibling
                sub.innerHTML = total
                //总价
                tot_s.innerHTML = Sum();
            } else {
                let curentTr = document.createElement("tr")
                curentTr.innerHTML += shopping
                $('.car table tr:last').after(curentTr)
                //总价
                tot_s.innerHTML = Sum();
                shopCartArr.push(a);
            }
        }
        //删除节点
        function del(th) {
            $(th).parent().parent().remove();
            //总价的span
            let tot_s = document.querySelector("#totle_span");
            tot_s.innerHTML = Sum();
            //数组数据清除
            let tid = th.parentElement.parentElement.firstElementChild.textContent;
            let idx = shopCartArr.indexOf(tid);
            shopCartArr.splice(idx, 1)
        }
        //输入框判断
        function inpnum(e) {
            //禁止输入非数字
            let value = e.value;
            let regx = /^\d+$/
            //总价的span
            let tot_s = document.querySelector("#totle_span");
            //小计的节点
            let total_ = e.parentElement.nextElementSibling
            //当前商品的单价
            let price = $(e).parent().prev().text()
            if (regx.test(value) || value == "") {
                if (value > 100) {
                    alert('数量必须在1——100之间')
                    e.style.backgroundColor = "red"
                    e.value = 1
                } else {
                    e.style.backgroundColor = "white"
                    //小计
                    let total = Number(value) * Number(price)
                    total_.innerHTML = total
                    //总价
                    tot_s.innerHTML = Sum();
                }
            } else {
                alert('数量必须是数值')
                e.style.backgroundColor = "red"
                e.value = 1
                //小计
                total_.innerHTML = price
                //总价
                tot_s.innerHTML = price
            }
        }
        //加号按钮
        function addval(th) {
            $(th).next().prop("value", Number($(th).next().val()) + 1);
            //小计
            let total = Number($(th).next().val()) * Number($(th).parent().prev().text())
            let total_ = th.parentElement.nextElementSibling
            total_.innerHTML = total
            //总价的span
            let tot_s = document.querySelector("#totle_span");
            //总价
            tot_s.innerHTML = Sum();
            //样式
            th.nextElementSibling.style.backgroundColor = "white"
        }
        //减号按钮
        function reduce(th) {
            if ($(th).prev().val() > 1) {
                $(th).prev().prop("value", Number($(th).prev().val()) - 1);
                //小计
                let total = Number(Number($(th).prev().val())) * Number($(th).parent().prev().text())
                let total_ = th.parentElement.nextElementSibling
                total_.innerHTML = total
                //总价的span
                let tot_s = document.querySelector("#totle_span");
                //总价
                tot_s.innerHTML = Sum();
            } else {
                alert("最后一件了");
                //样式
                th.previousElementSibling.style.backgroundColor = "white"
            }
        }
        //总价
        function Sum() {
            //所有的小计
            let per = document.getElementsByClassName("sub");
            per = Array.from(per)//类数组转换真数组
            let sum = 0;
            //数组总和
            per.forEach(element => {
                const perNum = +element.textContent
                sum += perNum
            });
            return sum
        }
    </script>
</body>

</html>