1.HTML代码(品优购模版)

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>我的购物车-品优购</title>

    <meta name="description" content="品优购JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" />

    <meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,品优购" />

    <!-- 引入facicon.ico网页图标 -->

    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

    <!-- 引入css 初始化的css 文件 -->

    <link rel="stylesheet" href="css/base.css">

    <!-- 引入公共样式的css 文件 -->

    <link rel="stylesheet" href="css/common.css">

    <!-- 引入car css -->

    <link rel="stylesheet" href="css/car.css">

    <!-- 先引入jquery  -->

    <script src="js/jquery.min.js"></script>

    <!-- 在引入我们自己的js文件 -->

    <script src="js/car.js"></script>

</head>

<body>

    <!-- 顶部快捷导航start -->

    <div class="shortcut">

        <div class="w">

            <div class="fl">

                <ul>

                    <li>品优购欢迎您！ </li>

                    <li>

                        <a href="#">请登录</a>

                        <a href="#" class="style-red">免费注册</a>

                    </li>

                </ul>

            </div>

            <div class="fr">

                <ul>

                    <li><a href="#">我的订单</a></li>

                    <li class="spacer"></li>

                    <li>

                        <a href="#">我的品优购</a>

                        <i class="icomoon"></i>

                    </li>

                    <li class="spacer"></li>

                    <li><a href="#">品优购会员</a></li>

                    <li class="spacer"></li>

                    <li><a href="#">企业采购</a></li>

                    <li class="spacer"></li>

                    <li><a href="#">关注品优购</a> <i class="icomoon"></i></li>

                    <li class="spacer"></li>

                    <li><a href="#">客户服务</a> <i class="icomoon"></i></li>

                    <li class="spacer"></li>

                    <li><a href="#">网站导航</a> <i class="icomoon"></i></li>

                </ul>

            </div>

        </div>

    </div>

    <!-- 顶部快捷导航end  -->

    <div class="car-header">

        <div class="w">

            <div class="car-logo">

                <img src="img/logo.png" alt=""> <b>购物车</b>

            </div>

        </div>

    </div>

    </div>

    <div class="c-container">

        <div class="w">

            <div class="cart-filter-bar">

                <em>全部商品</em>

            </div>

            <!-- 购物车主要核心区域 -->

            <div class="cart-warp">

                <!-- 头部全选模块 -->

                <div class="cart-thead">

                    <div class="t-checkbox">

                        <input type="checkbox" name="" id="" class="checkall"> 全选

                    </div>

                    <div class="t-goods">商品</div>

                    <div class="t-price">单价</div>

                    <div class="t-num">数量</div>

                    <div class="t-sum">小计</div>

                    <div class="t-action">操作</div>

                </div>

                <!-- 商品详细模块 -->

                <div class="cart-item-list">

                    <div class="cart-item check-cart-item">

                        <div class="p-checkbox">

                            <input type="checkbox" name="" id="" checked class="j-checkbox">

                        </div>

                        <div class="p-goods">

                            <div class="p-img">

                                <img src="upload/p1.jpg" alt="">

                            </div>

                            <div class="p-msg">【5本26.8元】经典儿童文学彩图青少版八十天环游地球中学生语文教学大纲</div>

                        </div>

                        <div class="p-price">￥12.60</div>

                        <div class="p-num">

                            <div class="quantity-form">

                                <a href="javascript:;" class="decrement">-</a>

                                <input type="text" class="itxt" value="1">

                                <a href="javascript:;" class="increment">+</a>

                            </div>

                        </div>

                        <div class="p-sum">￥12.60</div>

                        <div class="p-action"><a href="javascript:;">删除</a></div>

                    </div>

                    <div class="cart-item">

                        <div class="p-checkbox">

                            <input type="checkbox" name="" id="" class="j-checkbox">

                        </div>

                        <div class="p-goods">

                            <div class="p-img">

                                <img src="upload/p2.jpg" alt="">

                            </div>

                            <div class="p-msg">【2000张贴纸】贴纸书 3-6岁 贴画儿童 贴画书全套12册 贴画 贴纸儿童 汽</div>

                        </div>

                        <div class="p-price">￥24.80</div>

                        <div class="p-num">

                            <div class="quantity-form">

                                <a href="javascript:;" class="decrement">-</a>

                                <input type="text" class="itxt" value="1">

                                <a href="javascript:;" class="increment">+</a>

                            </div>

                        </div>

                        <div class="p-sum">￥24.80</div>

                        <div class="p-action"><a href="javascript:;">删除</a></div>

                    </div>

                    <div class="cart-item">

                        <div class="p-checkbox">

                            <input type="checkbox" name="" id="" class="j-checkbox">

                        </div>

                        <div class="p-goods">

                            <div class="p-img">

                                <img src="upload/p3.jpg" alt="">

                            </div>

                            <div class="p-msg">唐诗三百首+成语故事全2册 一年级课外书 精装注音儿童版 小学生二三年级课外阅读书籍</div>

                        </div>

                        <div class="p-price">￥29.80</div>

                        <div class="p-num">

                            <div class="quantity-form">

                                <a href="javascript:;" class="decrement">-</a>

                                <input type="text" class="itxt" value="1">

                                <a href="javascript:;" class="increment">+</a>

                            </div>

                        </div>

                        <div class="p-sum">￥29.80</div>

                        <div class="p-action"><a href="javascript:;">删除</a></div>

                    </div>

                </div>

                <!-- 结算模块 -->

                <div class="cart-floatbar">

                    <div class="select-all">

                        <input type="checkbox" name="" id="" class="checkall">全选

                    </div>

                    <div class="operation">

                        <a href="javascript:;" class="remove-batch"> 删除选中的商品</a>

                        <a href="javascript:;" class="clear-all">清理购物车</a>

                    </div>

                    <div class="toolbar-right">

                        <div class="amount-sum">已经选<em>1</em>件商品</div>

                        <div class="price-sum">总价： <em>￥12.60</em></div>

                        <div class="btn-area">去结算</div>

                    </div>

                </div>

            </div>

        </div>

    </div>

    <!-- footer start -->

    <div class="footer">

        <div class="w">

            <!-- mod_service -->

            <div class="mod_service">

                <ul>

                    <li>

                        <i class="mod-service-icon mod_service_zheng"></i>

                        <div class="mod_service_tit">

                            <h5>正品保障</h5>

                            <p>正品保障，提供发票</p>

                        </div>

                    </li>

                    <li>

                        <i class="mod-service-icon mod_service_kuai"></i>

                        <div class="mod_service_tit">

                            <h5>正品保障</h5>

                            <p>正品保障，提供发票</p>

                        </div>

                    </li>

                    <li>

                        <i class="mod-service-icon mod_service_bao"></i>

                        <div class="mod_service_tit">

                            <h5>正品保障</h5>

                            <p>正品保障，提供发票</p>

                        </div>

                    </li>

                    <li>

                        <i class="mod-service-icon mod_service_bao"></i>

                        <div class="mod_service_tit">

                            <h5>正品保障</h5>

                            <p>正品保障，提供发票</p>

                        </div>

                    </li>

                    <li>

                        <i class="mod-service-icon mod_service_bao"></i>

                        <div class="mod_service_tit">

                            <h5>正品保障</h5>

                            <p>正品保障，提供发票</p>

                        </div>

                    </li>

                </ul>

            </div>

            <!-- mod_help -->

            <div class="mod_help">

                <dl class="mod_help_item">

                    <dt>购物指南</dt>

                    <dd> <a href="#">购物流程 </a></dd>

                    <dd> <a href="#">会员介绍 </a></dd>

                    <dd> <a href="#">生活旅行/团购 </a></dd>

                    <dd> <a href="#">常见问题 </a></dd>

                    <dd> <a href="#">大家电 </a></dd>

                    <dd> <a href="#">联系客服 </a></dd>

                </dl>

                <dl class="mod_help_item">

                    <dt>购物指南</dt>

                    <dd> <a href="#">购物流程 </a></dd>

                    <dd> <a href="#">会员介绍 </a></dd>

                    <dd> <a href="#">生活旅行/团购 </a></dd>

                    <dd> <a href="#">常见问题 </a></dd>

                    <dd> <a href="#">大家电 </a></dd>

                    <dd> <a href="#">联系客服 </a></dd>

                </dl>

                <dl class="mod_help_item">

                    <dt>购物指南</dt>

                    <dd> <a href="#">购物流程 </a></dd>

                    <dd> <a href="#">会员介绍 </a></dd>

                    <dd> <a href="#">生活旅行/团购 </a></dd>

                    <dd> <a href="#">常见问题 </a></dd>

                    <dd> <a href="#">大家电 </a></dd>

                    <dd> <a href="#">联系客服 </a></dd>

                </dl>

                <dl class="mod_help_item">

                    <dt>购物指南</dt>

                    <dd> <a href="#">购物流程 </a></dd>

                    <dd> <a href="#">会员介绍 </a></dd>

                    <dd> <a href="#">生活旅行/团购 </a></dd>

                    <dd> <a href="#">常见问题 </a></dd>

                    <dd> <a href="#">大家电 </a></dd>

                    <dd> <a href="#">联系客服 </a></dd>

                </dl>

                <dl class="mod_help_item">

                    <dt>购物指南</dt>

                    <dd> <a href="#">购物流程 </a></dd>

                    <dd> <a href="#">会员介绍 </a></dd>

                    <dd> <a href="#">生活旅行/团购 </a></dd>

                    <dd> <a href="#">常见问题 </a></dd>

                    <dd> <a href="#">大家电 </a></dd>

                    <dd> <a href="#">联系客服 </a></dd>

                </dl>

                <dl class="mod_help_item mod_help_app">

                    <dt>帮助中心</dt>

                    <dd>

                        <img src="upload/erweima.png" alt="">

                        <p>品优购客户端</p>

                    </dd>

                </dl>

            </div>

            <!-- mod_copyright  -->

            <div class="mod_copyright">

                <p class="mod_copyright_links">

                    关于我们 | 联系我们 | 联系客服 | 商家入驻 | 营销中心 | 手机品优购 | 友情链接 | 销售联盟 | 品优购社区 | 品优购公益 | English Site | Contact U

                </p>

                <p class="mod_copyright_info">

                    地址：北京市北京市北京市北京市北京市北京市 邮编：100000 电话：400-000-00000 传真：010-0000000 邮箱: a@a.cn <br> 京ICP备0000000号京公网安备100000000

                </p>

            </div>

        </div>

    </div>

    <!-- footer end -->

</body>

</html>

2.CSS代码 （略）

3.JS代码

$(function () {

    //全选模块

    //就是把全选按钮（checkall)的状态赋值给 三个小的按钮(j-checkbox)就可以了

    $(".checkall").change(function () {

        $(".j-checkbox, .checkall").prop("checked", $(this).prop("checked"));

        if ($(this).prop("checked")) {

            $(".cart-item").addClass("check-cart-item");

        } else {

            $(".cart-item").removeClass("check-cart-item");

        }

        getSum();

    });

    $(".j-checkbox").change(function () {

        getSum();

    })

    // 如果小复选框被选中的个数等于3就应该把全选按钮选上，否则全选按钮不选。

    $(".j-checkbox").change(function () {

        // console.log($(".j-checkbox:checked").length);

        //$(".j-checkbox").length 是所有小复选框的个数

        if ($(".j-checkbox:checked").length === $(".j-checkbox").length) {

            $(".checkall").prop("checked", true);

        } else {

            $(".checkall").prop("checked", false);

        }

        if ($(this).prop("checked")) {

            $(this).parents(".cart-item").addClass("check-cart-item");

        } else {

            $(this).parents(".cart-item").removeClass("check-cart-item");

        }

    });

    //增减商品数量模块 首先声明一个变量，当点击+号（increment)，就让这个值++，然后赋值给文本框。

    $(".increment").click(function () {

        //得到当前兄弟文本框的值

        var n = $(this).siblings(".itxt").val();

        // console.log(n);

        n++;

        $(this).siblings(".itxt").val(n);

        // 计算小计模块 根据文本框的值 乘以 当前商品的价格 就是 商品的小计

        var p = $(this).parents(".p-num").siblings(".p-price").html();

        // console.log(p);

        p = p.substr(1);

        // console.log(p);

        var price = (p * n).toFixed(2);

        //小计模块

        $(this).parents(".p-num").siblings(".p-sum").html("¥" + price);

        getSum();

    })

    $(".decrement").click(function () {

        //得到当前兄弟文本框的值

        var n = $(this).siblings(".itxt").val();

        // console.log(n);

        if (n == 1) {

            return false;

        }

        n--;

        $(this).siblings(".itxt").val(n);

        // 计算小计模块 根据文本框的值 乘以 当前商品的价格 就是 商品的小计

        // var p = $(this).parent().parent().siblings(".p-price").html();

        //parents(".p-num") 返回指定祖先元素

        var p = $(this).parents(".p-num").siblings(".p-price").html();

        // console.log(p);

        p = p.substr(1);

        // console.log(p);

        var price = (p * n).toFixed(2);

        //toFixed(2)保留两位小数

        //小计模块

        $(this).parents(".p-num").siblings(".p-sum").html("¥" + price);

        getSum();

    })

    //4.用户修改文本框的值 计算 小计模块

    $(".itxt").change(function () {

        //先得到文本框的里面的值 乘以 当前商品的单价

        var n = $(this).val();

        //当前商品单价

        var p = $(this).parents(".p-num").siblings(".p-price").html();

        // console.log(p);

        p = p.substr(1);

        var price = (p * n).toFixed(2);

        $(this).parents(".p-num").siblings(".p-sum").html("¥" + price);

        getSum();

    })

    //5.计算总计和总额模块

    function getSum() {

        var count = 0;//计算总件数

        var money = 0;//计算总额

        $(".j-checkbox:checked").parents(".p-checkbox").siblings(".p-num").children(".quantity-form").children(".itxt").each(function (i, ele) {

            count += parseInt($(ele).val());

        });

        $(".amount-sum em").text(count);

        $(".j-checkbox:checked").parents(".p-checkbox").siblings(".p-sum").each(function (i, ele) {

            money += parseFloat($(ele).text().substr(1));

        });

        $(".price-sum em").text("¥" + money.toFixed(2));

    }

    //6.删除商品模块

    //(1).单个商品删除按钮

    $(".p-action a").click(function () {

        $(this).parents(".cart-item").remove();

        getSum();

    })

    //(2).删除选中商品

    $(".remove-batch").click(function () {

        $(".j-checkbox:checked").parents(".cart-item").remove();

        getSum();

    })

    //(3).清空购物车，删除全部商品

    $(".clear-all").click(function () {

        $(".cart-item").remove();

        getSum();

    })

})

需要引入jquery文件，仅供学习参考，新手练习大佬勿喷

最新文章

  1. option(recompile)
  2. 手把手教你使用Git
  3. Java文件选择对话框（文件选择器JFileChooser）的使用：以一个文件加密器为例
  4. [leetcode]算法题目 - Sudoku Solver
  5. Delphi Xe 中如何把日期格式统一处理，玩转 TDatetime
  6. error LNK2001: 无法解析的外部符号 _IID_IDirectDraw7
  7. 不区分大小写匹配字符串，并在不改变被匹配字符串的前提下添加html标签
  8. Http Get Post put delete
  9. Yii::app()方法详解
  10. [转] Web性能压力测试工具之ApacheBench（ab）详解
  11. 解决MySQL中文乱码的问题
  12. Android SVN开发实战的文件夹结构呈现
  13. jQuery复习：第五章
  14. java dom4j解析xml实例(2)
  15. P2051 [AHOI2009]中国象棋
  16. DSAPI HTTP监听服务端与客户端
  17. 一个漂亮的php验证码类
  18. 用sitemap做主页的菜单栏
  19. 关于js特效轮播图练习
  20. 解决Win 10上SSD缓慢问题

热门文章

  1. Docker是简介
  2. struts2思想学习（一）
  3. linux centos 网卡有关调试
  4. swiper tabs综合示例
  5. CodeReview杂谈
  6. python 并行计算
  7. Redis的读写分离
  8. Abp VNext权限定义
  9. Excel表格中单击一个单元格如何将整行整列变色
  10. 一个简单的session传值学习