实现网页购物车功能，完成基本的商品价格计算等功能

系统管理员 2023-02-10 05:20 116阅读 0赞

## 效果图 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTAyODQ0_size_16_color_FFFFFF_t_70]

## 说明 ##

*  html, css, js 代码分别保存 index.html , main.css, main.js 文件中，而main.css 和 main.js 文件又分别保存在 css 和 js 文件夹下。3张素材图片保存在 images 目录下，具体情况见下图：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTAyODQ0_size_16_color_FFFFFF_t_70 1]

## 素材图片 ##

*  pic01.jpg  
    ![在这里插入图片描述][20200520143727974.jpg]
 *  pic02.jpg  
    ![在这里插入图片描述][20200520143746317.jpg]
 *  pic03.jpg  
    ![在这里插入图片描述][20200520143752215.jpg]

## 源代码 ##

#### HTML代码 ####

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>购物车——PC端</title>
        <link rel="stylesheet" href="css/main.css">
    </head>
    
    <body>
        <div class="wrap clearfix">
            <div class="location">当前位置：首页<span>></span><b class="red">购物车</b></div>
            <table width="100%" class="cartTable" cellspacing="0" cellpadding="10px">
                
                <tr class="title">
                    <td width="50"><input type="checkbox" name="" class="choose_all"></td>
                    <td width="100" class=""><span style="margin-left: -10px;">全选</span></td>
                    <td width="400">商品信息</td>
                    <td width="150">单价（元）</td>
                    <td width="150">数量</td>
                    <td width="150">金额（元）</td>
                    <td width="80">操作</td>
                </tr>
    
                
                <tr class="row">
                    <td><input type="checkbox" name="" class="choose"></td>
                    <td class="tal"><a href="#" class="pic"><img src="images/pic01.jpg" alt=""></a></td>
                    <td class="tal"><a href="#">凌美Lamy Safari钢笔/签字笔T52黑色墨水</a></td>
                    <td>
                        <span class="tdl">158.00</span>
                        <br>
                        <b class="unit">129.00</b>
                    </td>
                    <td>
                        <div class="amount">
                            <a href="#" class="Increase">+</a>
                            <input type="text" value="1" class="unum">
                            <a href="#" class="Reduce">-</a>
                        </div>
                    </td>
                    <td><b class="u-price">129.00</b></td>
                    <td><a href="#" class="btn-del">删除</a></td>
                </tr>
                
                <tr class="row">
                    <td><input type="checkbox" name="" checked="checked" class="choose"></td>
                    <td class="tal"><a href="#" class="pic"><img src="images/pic02.jpg" alt=""></a></td>
                    <td class="tal"><a href="#">凌美Lamy Safari钢笔/签字笔T52黑色墨水</a></td>
                    <td>
                        <span class="tdl">358.00</span>
                        <br>
                        <b class="unit">299.00</b>
                    </td>
                    <td>
                        <div class="amount">
                            <a href="#" class="Increase">+</a>
                            <input type="text" value="1" class="unum">
                            <a href="#" class="Reduce">-</a>
                        </div>
                    </td>
                    <td><b class="u-price">299.00</b></td>
                    <td><a href="#" class="btn-del">删除</a></td>
                </tr>
    
                <tr class="row">
                    <td><input type="checkbox" name="" checked="checked" class="choose"></td>
                    <td class="tal"><a href="#" class="pic"><img src="images/pic03.jpg" alt=""></a></td>
                    <td class="tal"><a href="#">德国进口 凌美(LAMY)签字笔钢笔墨水水笔专用一次性墨水胆笔芯5支一盒T10德国进口</a></td>
                    <td>
                        <span class="tdl">54.00</span>
                        <br>
                        <b class="unit">37.00</b>
                    </td>
                    <td>
                        <div class="amount">
                            <a href="#" class="Increase">+</a>
                            <input type="text" value="1" class="unum">
                            <a href="#" class="Reduce">-</a>
                        </div>
                    </td>
                    <td><b class="u-price">37.00</b></td>
                    <td><a href="#" class="btn-del">删除</a></td>
                </tr>
    
                <tr class="count">
                    <td colspan="7">
                        <div class="jiesuan clearfix">
                            <div class="left fl">
                                <p><input type="checkbox" name="" class="choose_all"> 全选   <a href="#" class="del_check">删除选中商品</a></p>
                            </div>
                            <div class="right fr clearfix">
                                <p>商品总计：￥465.00</p>
                                <p>活动优惠：-￥0.00</p>
                                <p>已选商品<span class="red t-number"> 0 </span>件 总价(不含运费、税费)：<span class="red t-price">￥0.00</span></p>
                                
                                <a href="#" class="btn pay fr">结算</a>
                            </div>
                        </div>
                    </td>
                </tr>
            </table>
        </div>    
    
        
        <script src="js/main.js"></script>
    </body>
    
    </html>

#### CSS代码 ####

/* 公共样式 */
    .clearfix{ 
        content: '';
        display: block;
        clear: both;
    }
    .red{ 
        color: #f30213;
    }
    .fl{ 
        float: left;
    }
    .fr{ 
        float: right;
    }
    
    /* 清除默认样式 */
    *{ 
        margin: 0px;
        padding: 0px;
        font-size: 14px;
    }
    a{ 
        text-decoration: none;
        color: #333;
    }
    input{ 
        outline: none;
    }
    
    .wrap{ 
        width: 1180px;
        margin: 0 auto;
    }
    .wrap .location{ 
        padding: 10px 0;
        border-bottom: 1px solid #ccc;
        margin-bottom: 20px;
    }
    .cartTable{ 
        border: 1px solid #ccc;
        
    }
    .cartTable tr.title{ 
        background-color: rgb(241, 243, 244);
        font-weight: bold;
    }
    .cartTable tbody tr td{ 
        /* border: 1px solid rgb(245, 245, 245); */
        padding: 10px;
    }
    /* 原价 */
    .cartTable tbody tr td .tdl{ 
        text-decoration: line-through;
        color: #999;
    }
    /* 商品数量 */
    .cartTable tr .amount .unum{ 
        width: 70px;  
        height: 30px;
        box-sizing: border-box;
        text-align: center;
        font-size: 16px;
        float: left;
    }
    /* 数量加减按钮 */
    .cartTable tr .amount a{ 
        display: block;
        width: 30px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        font-size: 18px;
        border: 1px solid #ccc;
        box-sizing: border-box;
    }
    .cartTable tr .amount a.Increase{ 
        border-right: none;
        float: left;
    }
    .cartTable tr .amount a.Reduce{ 
        border-left: none;
        float: left;
    }
    
    .cartTable tr.count .jiesuan .right{ 
        text-align: right;
        
    }
    .cartTable tr.count .jiesuan .right p{ 
        margin: 5px 0;
    }
    .cartTable tr.count .jiesuan .right .pay{ 
        display: block;
        width: 160px;
        height: 50px;
        line-height: 50px;    
        background-color: #f30213;
        color: #fff;
        font-weight: bold;  
        text-align: center;
        font-size: 20px;
    }

#### JS代码 ####

/* 功能列表 1，全选功能 选中所有行，汇总价格 2，单选功能 选中或取消选中一行 3，数量加减按钮 增减商品数量，计算小计价格 4，删除按钮 移除当前行，重新计算总计价格 5，删除被选中的商品 */
    
    // 获取所有加减按钮(得到的是一个数组)
    var add = document.querySelectorAll(".Increase");
    var reduce = document.querySelectorAll(".Reduce");
    // 获取所有文本框
    var inputs = document.querySelectorAll(".unum");
    // 获取所有行
    var rows = document.querySelectorAll(".row");
    // 获取所有单选框 
    var chooses = document.querySelectorAll(".choose");
    // 获取所有全选按钮
    var choose_alls = document.querySelectorAll(".choose_all");
    // 获取所有删除按钮
    var btn_dels = document.querySelectorAll(".btn-del");
    // 删除选中的商品
    var del_check = document.querySelector(".del_check");
    
    
    // 给所有的加减按钮绑定点击事件
    for(var i=0; i<add.length; i++){ 
        add[i].onclick=function(){ 
    
            // 获取对应的父节点
            var amount = this.parentNode;
            // 获取文本框
            var input = amount.querySelector(".unum");
            // 获取文本框中的数量
            var num = input.value;
            num++;
            // 修改文本框的值
            input.value=num;
    
            // 计算小计
            // 获取当前行
            var tr =  amount.parentNode.parentNode;
            // 获取商品单价
            var unit = tr.querySelector(".unit");
            var price = unit.innerHTML;
            // 重新计算小计价格
            smallTotal = num*price;
            // 保留两位小数
            smallTotal = smallTotal.toFixed(2);
    
            // 将计算好的小计价格设置给金额
            var u_price = tr.querySelector(".u-price");
            u_price.innerHTML = smallTotal;
    
            // 使当前行被选中
            var choose = tr.querySelector(".choose");
            // 把它当成逻辑变量，赋true false也可以 
            choose.checked = "checked";
    
            // 计算总计
            setTotal();
        }
    }
    
    for(var i=0; i<reduce.length; i++){ 
        reduce[i].onclick=function(){ 
    
            // 获取对应的父节点
            var amount = this.parentNode;
            // 获取文本框
            var input = amount.querySelector(".unum");
            // 获取文本框中的数量
            var num = input.value;
            if(num > 1){ 
                num--;
            }
            // 修改文本框的值
            input.value=num;
    
            // 计算小计
            // 获取当前行
            var tr =  amount.parentNode.parentNode;
            // 获取商品单价
            var unit = tr.querySelector(".unit");
            var price = unit.innerHTML;
            // 重新计算小计价格
            smallTotal = num*price;
            // 保留两位小数
            smallTotal = smallTotal.toFixed(2);
    
            // 将计算好的小计价格设置给金额
            var u_price = tr.querySelector(".u-price");
            u_price.innerHTML = smallTotal;
    
            // 使当前行被选中
            var choose = tr.querySelector(".choose");
            // 把它当成逻辑变量，赋true false也可以 
            choose.checked = "checked";
    
            setTotal();
        }
    }
    
    // 用户手动修改文本框中的商品数量
    for(var i=0; i<inputs.length; i++){ 
        // 给每个文本框绑定 失焦 事件 
        inputs[i].onblur = function(){ 
            // 防止出现负数
            if(this.value < 1){ 
                this.value = 1;
            }
            // 防止输入小数或其它字符
            this.value = parseInt(this.value);
    
            // 计算小计
            // 获取当前行
            var tr =  this.parentNode.parentNode.parentNode;
            // 获取商品单价
            var unit = tr.querySelector(".unit");
            var price = unit.innerHTML;
            // 重新计算小计价格
            smallTotal = this.value*price;
            // 保留两位小数
            smallTotal = smallTotal.toFixed(2);
    
            // 将计算好的小计价格设置给金额
            var u_price = tr.querySelector(".u-price");
            u_price.innerHTML = smallTotal;
    
            // 使当前行被选中
            var choose = tr.querySelector(".choose");
            // 把它当成逻辑变量，赋true false也可以 
            choose.checked = "checked";
    
            setTotal();
        }
    }
    
    // 计算总计价格 & 计算选中的商品总数 & 同时判断是否全选
    function setTotal(){ 
        var total = 0;  // 商品总价
        var allNum = 0; // 商品总数
        // 重新获取行
        rows = document.querySelectorAll(".row");
        // 遍历所有行
        for(var i=0; i<rows.length; i++){ 
            // 查找被选中的行
            var checkbox = rows[i].querySelector(".choose");
            if(checkbox.checked){ 
                
                // 获取小计价格（得到的是字符串，不是数字，需要转化）
                var smallTotal = rows[i].querySelector(".u-price").innerHTML;
                // 获取商品数量
                var num = rows[i].querySelector(".unum").value;
                // 把小计价格转化为数字
                smallTotal = Number(smallTotal);
                total += smallTotal;
                // 计算商品总数
                num = Number(num);
                allNum += num;
            }
        }
    
        // 把总计放在它应在的位置 
        var totalPrice = document.querySelector(".t-price");
        totalPrice.innerHTML = total.toFixed(2);
        // 设置商品总数
        document.querySelector(".t-number").innerHTML = allNum;
    
        var isCheckAll = true;
        for(var i=0; i<rows.length; i++){ 
            var checkbox = rows[i].querySelector(".choose");
            if(!checkbox.checked){ 
                isCheckAll = false;
                break;
            }
        }
        if(rows.length<=0){ 
            isCheckAll = false;
        }
        // 将两个全选框设置为和全选变量相同的值
        choose_alls[0].checked = isCheckAll;
        choose_alls[1].checked = isCheckAll;
    }
    
    // 单选框点击事件 
    for(var i=0; i<chooses.length; i++){ 
        chooses[i].onclick = function(){ 
            // 求一下总计就行了
            setTotal();
        }
    }
    
    // 全选框点击事件
    for(var i=0; i<choose_alls.length; i++){ 
        choose_alls[i].onclick = function(){ 
            // 全选/全不选所有单选框
            for(var i=0; i<rows.length; i++){ 
                var checkbox = rows[i].querySelector(".choose");
                checkbox.checked = this.checked;
            }
            // 与另外一个全选框联动
            choose_alls[0].checked = this.checked;
            choose_alls[1].checked = this.checked;
            // 计算总计
            setTotal();
        }
    }
    
    // 删除当前行
    for(var i=0; i<btn_dels.length; i++){ 
        btn_dels[i].onclick = function(){ 
            var tr = this.parentNode.parentNode;
            tr.parentNode.removeChild(tr);
            setTotal();
        }
    }
    
    // 删除选中行
    del_check.onclick = function(){ 
        rows = document.querySelectorAll(".row");
        for(var i=0; i<rows.length; i++){ 
            var checkbox = rows[i].querySelector(".choose");
            if(checkbox.checked){ 
                rows[i].parentNode.removeChild(rows[i]);
            }
        }
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTAyODQ0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200520143407695.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTAyODQ0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTAyODQ0_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200520144115167.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTAyODQ0,size_16,color_FFFFFF,t_70
[20200520143727974.jpg]: https://img-blog.csdnimg.cn/20200520143727974.jpg
[20200520143746317.jpg]: https://img-blog.csdnimg.cn/20200520143746317.jpg
[20200520143752215.jpg]: https://img-blog.csdnimg.cn/20200520143752215.jpg