H5+CSS+JS实现购物车添加，操作，删除数据功能

最新推荐文章于 2024-05-28 18:30:26 发布

weixin_58164147

最新推荐文章于 2024-05-28 18:30:26 发布

阅读量681

点赞数

文章标签： css javascript 前端

本文链接：https://blog.csdn.net/weixin_58164147/article/details/132478115

版权

代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .table {
            width: 800px;
            border: 2px solid black;
        }

        .table .title {
            width: 800px;
            height: 50px;
            background-color: pink;
            text-align: center;
            line-height: 50px;
            font-family: "楷体";
            font-weight: bold;
            margin-bottom: 10px;
        }

        .table .title div {
            width: 100px;
            height: 50px;
            float: left;
        }

        .table .title .T-check {
            width: 75px;
        }

        .table .title .T-num {
            width: 200px;
        }

        .table .title .T-controls {
            width: 75px;
        }

        .table .goods .content {
            width: 800px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            font-family: "楷体";
            margin-bottom: 10px;
        }

        .table .goods .content div {
            width: 100px;
            height: 50px;
            float: left;
        }

        .table .goods .content .C-check {
            width: 75px;
        }

        .table .goods .content .C-num {
            width: 200px;
        }

        .table .goods .C-num .decrease,
        .increase {
            width: 20px;
            height: 20px;
        }

        .table .goods .content .C-num .text {
            width: 50px;
        }

        .table .goods .content .C-controls {
            width: 75px;
        }

        .table .goods .nullList {
            width: 800px;
            height: 350px;
            background-image: url(https://www.jkwedu.net/images/empty/cart.png);
            background-size: 100% 100%;
        }

        .table .payment {
            width: 800px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            font-family: "楷体";
        }

        .table .payment .right {
            width: 350px;
            height: 50px;
            float: right;
        }

        .table .payment .right .totalText {
            color: coral;
            font-weight: bold;
        }

        .table .payment .right input,
        .addList {
            width: 100px;
            height: 40px;
            background-color: coral;
            border: none;
            font-family: "楷体";
            margin-left: 80px;
        }
    </style>
</head>

<body>
    商品名称：<input type="text" class="getName" placeholder="请输入购买商品名称"><br><br>
    商品价格：<input type="text" class="getPrice" placeholder="请输入购买商品价格"><br><br>
    商品数量：<input type="text" class="getNum" placeholder="请输入想要购买的商品数量"><br><br>
    <input type="button" value="加入购物车" class="addList" onclick="getNewList()"><br><br>
    <div class="table">
        <div class="title">
            <div class="T-check"><input type="checkbox" class="allChecked">
                选择
            </div>
            <div class="T-id">
                编号
            </div>
            <div class="T-name">
                商品名称
            </div>
            <div class="T-price">
                商品价格
            </div>
            <div class="T-num">
                商品数量
            </div>
            <div class="T-numprice">
                商品小计
            </div>
            <div class="T-controls">
                操作
            </div>
        </div>
        <div class="goods">

        </div>
        <div class="payment">
            <div class="right">
                价格总计为<span class="totalText"></span>元<input type="button" value="去结算">
            </div>
        </div>
    </div>
</body>
<script>

    var goodsList = [
        {
            check: false,
            product: "手机",
            price: 5,
            num: 2,
        },
        {
            check: false,
            product: "平板",
            price: 7,
            num: 1,
        },
        {
            check: true,
            product: "电脑",
            price: 10,
            num: 5,
        }
    ]
    //渲染

    function byGoods(goodsList, box) {
        for (var i = 0; i < goodsList.length; i++) {
            
            res =(goodsList[i].price * 100    * goodsList[i].num) / 100 ;

            goodsList[i].numPrice =  res.toFixed(2)
        }
        str = ""
        if (goodsList.length == 0) {
            str += `<div class="nullList"></div>`
        } else {
            for (var i = 0; i < goodsList.length; i++) {
                str += `
            <div class="content">
                <div class="C-check">
                    <input type="checkbox" ${goodsList[i].check ? "checked" : ''} data-index="${i}" class="check">
                </div>
                <div class="C-id">
                    ${i + 1}
                </div>
                <div class="C-name">
                    ${goodsList[i].product}
                </div>
                <div class="C-price">
                    ${goodsList[i].price}
                </div>
                <div class="C-num">
                    <input type="button" value="-" class="decrease" data-index="${i}" ${goodsList[i].num == 1 ? "disabled" : ''}>
                    <input type="text" value="${goodsList[i].num}" class="text" data-index="${i}"> 
                    <input type="button" value="+" class="increase" data-index="${i}">
                </div>
                <div class="C-numprice">
                    ${goodsList[i].numPrice}
                </div>
                <div class="C-controls">
                    <input type="button" value="删除" class="dele" data-index="${i}">
                </div>
            </div>`
            }
        }

        box.html(str)
        $(".content:even").css("background-color", "aqua")
        $(".content:odd").css("background-color", "rgb(31, 117, 85)")
        deleList()
        setChecked()
        setAllChecked()
        setNum()

        numChange()
        setCheckedAll()
        totalPrice($(".totalText:eq(0)"))
    }
    byGoods(goodsList, $(".goods:eq(0)"))
    // 合计
    function totalPrice(box) {
        var total = 0;
        for (var i = 0; i < goodsList.length; i++) {
            if (goodsList[i].check) {
                total += parseFloat(goodsList[i].numPrice)
            }
        }
        box.text(total)
    }
    totalPrice($(".totalText:eq(0)"))
    //删除
    function deleList() {
        $(".dele").click(function () {
            if (confirm("您确定删除当前商品吗")) {
                goodsList.splice($(this).attr("data-index"), 1)
            }
            byGoods(goodsList, $(".goods:eq(0)"))
            totalPrice($(".totalText:eq(0)"))
        })
    }
    //全选状态
    function setAllChecked() {
        var checkedValue = 0
        for (var i = 0; i < goodsList.length; i++) {
            if (goodsList[i].check) {
                checkedValue++
            }
        }
        if (checkedValue == goodsList.length) {
            $(".allChecked:eq(0)").attr("checked", true)
        } else {
            $(".allChecked:eq(0)").attr("checked",false)
        }
    }

    //选择
    function setChecked() {
        $(".check").change(function () {
            goodsList[$(this).attr("data-index")].check = !goodsList[$(this).attr("data-index")].check
            setAllChecked()
            totalPrice($(".totalText:eq(0)"))
        })
    }
    //增加减少
    function numChange() {
        $(".decrease").click(function () {
            if (goodsList[$(this).attr("data-index")].num > 1) {
                goodsList[$(this).attr("data-index")].num--
            }
            byGoods(goodsList, $(".goods:eq(0)"))
        })
        $(".increase").click(function () {
            goodsList[$(this).attr("data-index")].num++
            byGoods(goodsList, $(".goods:eq(0)"))
        })
    }
    //全部选择
    function setCheckedAll() {
        $(".allChecked:eq(0)").change(function () {
            if ($(this).prop("checked")) {
                for (let i = 0; i < goodsList.length; i++) {
                    goodsList[i].check = true
                }
            } else {
                for (let i = 0; i < goodsList.length; i++) {
                    goodsList[i].check = false
                }
            }
            byGoods(goodsList, $(".goods:eq(0)"))
        })
    }
    //数量输入
    function setNum() {
        $(".text").change(function () {
            if (!isNaN($(this).val())) {
                goodsList[$(this).attr("data-index")].num = parseInt($(this).val())
            }
            if ($(this).val() < 1) {
                goodsList[$(this).attr("data-index")].num = 1
                alert("请至少输入一个商品")
            }
            byGoods(goodsList, $(".goods:eq(0)"))
        })
    }
    //增加数据
    function getNewList() {
        if($(".getNum:eq(0)").val()=="" || $(".getName:eq(0)").val()=="" || $(".getPrice:eq(0)").val()==""){
            return alert("商品名称、价格、数量不能为空")
        }
        if(isNaN($(".getPrice:eq(0)").val()) ||  $(".getPrice:eq(0)").val() < 0){
            return alert("请输入一个大于0的价格数字")
        }
        if(isNaN($(".getNum:eq(0)").val()) || parseFloat($(".getNum:eq(0)").val())!=parseInt($(".getNum:eq(0)").val()) || $(".getNum:eq(0)").val() < 1){
            return alert("请输入一个大于1的整数数量")
        }
        
        var newArr = {
            check: true,
            product: $(".getName:eq(0)").val(),
            price: $(".getPrice:eq(0)").val(),
            num: $(".getNum:eq(0)").val(),
        }

        goodsList.unshift(newArr)
        byGoods(goodsList, $(".goods:eq(0)"))
        $(".getName:eq(0)").val("")
        $(".getPrice:eq(0)").val("")
        $(".getNum:eq(0)").val("")
    }


</script>

</html>

步骤解析：

省略css，html样式

1、首先，定义一个'goodsList'数组，里面包含购物车的商品数据信息，包含是否选中、商品名称、商品价格、商品数量、小计

2、通过‘byGoods'函数渲染页面，将小计动态插入数组，根据提供的'goodsList'生成购物车商品列表，会判断是否有商品，没有商品判断为空进行提示

3、’totalPrice‘函数，遍历整个数组用于统计所有被选中的商品小计的和

4、通过‘deleList’函数可以删除数组的数据，通过删除数组数据改变页面，删除时提示是否确认删除，删除后重新渲染页面，计算价格

5、’setAllChecked‘函数，给一个计数器，遍历所有商品，有商品为选中时计算器加一，当计数器的数值与数组的长度相等时，全选框状态变为选中状态，不相等则为不选中状态

6、’setChecked'函数，通过商品复选框的改变，改变数组中商品的选中状态，若复选框改变，将选中状态取反赋值给原来的选中状态，通过复选框是否被选中来计算选中商品总价

7、‘numChange’函数来操作商品的数量给两个按钮分别加上点击事件，点击‘-’商品数量减一，点击‘+‘商品数量加一，点击后重新渲染页面和重新计算小计

8、通过'setCheckedAll'函数点击全选复选框把所有商品的复选框变成选中/不选中状态，当判断全选框被选中，把数组所有商品的选中状态改为true，反之改为false，最后渲染页面

9、'setNum'函数实现数量文本框的手动输入，给文本框一个change（）方法，当文本框改变时先判断输入内容是否为数字，是否大于1，都符合将输入数字赋值给数组的num，小于1时，值给1并提示，最后渲染页面

10、'getNewList'函数用于提交数据到购物车，点击加入购物车，判断三个输入框输入内容是否符合要求，复合则将文本框的value值赋值给新的数据，接着将数据插入数组的第一个位置，用新数组渲染页面，添加完毕将文本框内容设置为空