品优购综合案例——购物车（JQ实现11个效果+Html+Css）之自学系列

最新推荐文章于 2024-05-22 13:09:45 发布

学习前端的一只旺财

最新推荐文章于 2024-05-22 13:09:45 发布

阅读量4.6k

点赞数 11

分类专栏： jquery 自学html+css 黑马案例文章标签： javascript jquery css3 html5

本文链接：https://blog.csdn.net/weixin_46972646/article/details/112671196

版权

自学html+css 同时被 3 个专栏收录

12 篇文章 6 订阅

订阅专栏

黑马案例

11 篇文章 4 订阅

订阅专栏

jquery

6 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/shopcar.css">
    <style>
        .turnred{
            font-size: 16px;
            color: #E2231A;
            font-weight: 700;
        }
    </style>
</head>
<body>
    
        <!-- 顶部快捷导航 start -->
        <div class="shortcut">
            <div class="w">
                <div class="short-l fl">   
                    <ul>
                        <li><a href="#">品优购欢迎您！</a></li> 
                        <li>
                            <a href="#">请登录  </a>
                            <a href="" class="style-red">免费注册</a>
                        </li>
                    </ul>
                 </div>
                <div class="short-r fr">
                    <ul> 
                        <!-- 由于li内字数不一样，不要给宽度 -->
                        <li>
                            <a href="">我的订单</a>
                            <span class="sx">|</span>
                        </li>
                        <li class="spacer">
                            <a href="">我的品优购</a>
                            <i class="icomoon1"></i>
                            <span class="sx">|</span>
                        </li>
                        <li>
                            <a href="">品优购会员</a>
                            <span class="sx">|</span>
                        </li>
                        <li>
                            <a href="">企业采购</a>
                            <span class="sx">|</span>
                        </li>
                        <li class="spacer">
                            <a href="">关注品优购</a>
                            <i class="icomoon1"></i>
                            <span class="sx">|</span>
                        </li>
                        <li class="spacer">
                            <a href="">客户服务</a>
                            <i class="icomoon1"></i>
                            <span class="sx">|</span>
                        </li>
                        <li class="spacer">
                            <a href="">网站导航</a>
                            <i class="icomoon1"></i>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- 顶部快捷导航 end -->

            <!-- header部分 start -->
            <div class="headerwai">
                <div class="w">
                    <div class="header">  
                        <!-- logo模块 -->
                        <div class="logo">
                            <!-- 对logo进行优化 -->
                            <h1> <a href="index.html" title="品优购"><!--  背景图片在这里 -->品优购</a></h1>
                        </div>
                        <div class="shopcar-gwc">购物车</div>
                    </div>
            </div>
                <!-- header部分 end -->

        <div class="w">
            <div class="big-concent">
                <div class="cart-filter-bar"><span>全部商品</span> </div>
                <div class="cart-thead">
                    <div class="t-checkbox fl"> <input type="checkbox" class="checkall">全选</div>
                    <div class="t-goods fl"><span>商品</span></div>
                    <div class="t-price fl"><span>单价</span></div>
                    <div class="t-num fl"><span>数量</span></div>
                    <div class="t-sum fl"><span>小计</span></div>
                    <div class="t-action fl"><span>操作</span></div>
                </div>
                <div class="cart-item-list">
                    <div class="cart-item check-cart-item">
                        <div class="p-checkbox fl"> <input type="checkbox" checked='checked' class="j-checkbox"></div>
                        <div class="p-goods fl" > 
                            <div class="p-goods-hd fl">
                                <img src="img/p1.jpg" alt="">
                            </div>
                            <div class="p-goods-bd fl">【5本26.8元】经典儿童文学彩图青少 <br> 版八十天环游地球中学生语文教学大纲</div>
                        </div>
                        <div class="p-price fl">￥12.60</div>
                        <div class="p-num fl">
                                <a href="javascript:;" class="decrement">-</a>
                                <input type="text" value="1" class="itxt">
                                <a href="javascript:;" class="increment">+</a>
                        </div>
                        <div class="p-sum fl">￥12.60</div>
                        <div class="p-action fl"><a href="javascript:;" title="删除">删除</a>
                        </div>
                    </div>
                    <div class="cart-item">
                        <div class="p-checkbox fl"> <input type="checkbox" class="j-checkbox"></div>
                        <div class="p-goods fl" > 
                            <div class="p-goods-hd fl">
                                <img src="img/p2.jpg" alt="">
                            </div>
                            <div class="p-goods-bd fl">【5本26.8元】经典儿童文学彩图青少 <br> 版八十天环游地球中学生语文教学大纲</div>
                        </div>
                        <div class="p-price fl">￥24.80</div>
                        <div class="p-num fl">
                                <a href="javascript:;" class="decrement">-</a>
                                <input type="text" value="1" class="itxt">
                                <a href="javascript:;" class="increment">+</a>
                        </div>
                        <div class="p-sum fl">￥24.80</div>
                        <div class="p-action fl"><a href="javascript:;" title="删除">删除</a>
                        </div>
                    </div>
                    <div class="cart-item">
                        <div class="p-checkbox fl"> <input type="checkbox" class="j-checkbox"></div>
                        <div class="p-goods fl" > 
                            <div class="p-goods-hd fl">
                                <img src="img/p3.jpg" alt="">
                            </div>
                            <div class="p-goods-bd fl">【5本26.8元】经典儿童文学彩图青少 <br> 版八十天环游地球中学生语文教学大纲</div>
                        </div>
                        <div class="p-price fl">￥29.80</div>
                        <div class="p-num fl">
                                <a href="javascript:;" class="decrement">-</a>
                                <input type="text" value="1" class="itxt">
                                <a href="javascript:;" class="increment">+</a>
                        </div>
                        <div class="p-sum fl">￥29.80</div>
                        <div class="p-action fl"><a href="javascript:;" title="删除">删除</a>
                        </div>
                    </div>
                    <div class="cart-item-last">
                        <div class="p-checkbox fl"> <input type="checkbox" class="checkall"> <span > 全选</span> </div>
                        <div class="remove-checked fl"> <a href="javascript:;">删除选中的商品</a></div>
                        <div class="remove-all fl"> <a href="javascript:;">清理购物车</a> </div>
                        <div class="toolbar-right fr">
                            <div class="amount-sum fl">已经选 <span>1</span>件商品 </div>
                            <div class="price-sum fl">总价: <span>￥12.60</span></div>
                            <div class="btn-area fl"><a href="javascript:;">去结算</a></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <!-- footer部分 start -->
        <div class="last-bottom">
            <div class="footer-restart" id="footer-restart">
                <div class="w">
                    <div class="footer-top">
                        <ul>
                            <li class="footer-top-li1">
                                <div class="img-left img-left-icon1 fl"></div>
                                <div class="text-right fl">
                                    <h4>正品保障</h4>
                                    <p>正品保障，提供发票</p>
                                </div>
                            </li>
                            <li>
                                <div class="img-left img-left-icon2 fl"></div>
                                <div class="text-right fl">
                                    <h4>极速物流</h4>
                                    <p>急速物流，极速送达</p>
                                </div>
                            </li>
                            <li>
                                <div class="img-left img-left-icon3 fl"></div>
                                <div class="text-right fl">
                                    <h4>无忧售后</h4>
                                    <p>7天无理由退还</p>
                                </div>
                            </li>
                            <li>
                                <div class="img-left img-left-icon4 fl"></div>
                                <div class="text-right fl">
                                    <h4>特色服务</h4>
                                    <p>私人定制家电套餐</p>
                                </div>
                            </li>
                            <li>
                                <div class="img-left img-left-icon5 fl"></div>
                                <div class="text-right fl">
                                    <h4>帮助中心</h4>
                                    <p>您的购物指南</p>
                                </div>
                            </li>
                            
                        </ul>
                    </div>
                    <div class="footer-middle">
                        <ul class="max-ul">
                            <li class="max-li">
                                <h4>购物指南</h4>
                                <ul class="footer-middle-ul">
                                    <li>购物流程</li>
                                    <li>会员介绍</li>
                                    <li>生活旅行/团购</li>
                                    <li>常见问题</li>
                                    <li>大家电</li>
                                    <li>联系客服</li>
                                </ul>
                            </li>
                            <li class="max-li">
                                <h4>配送方式</h4>
                                <ul class="footer-middle-ul">
                                    <li>上门自提</li>
                                    <li>211限时达</li>
                                    <li>配送服务查询</li>
                                    <li>配送费收取标准</li>
                                    <li>海外配送</li>
                                </ul>
                            </li>
                            <li class="max-li">
                                <h4>支付方式</h4>
                                <ul class="footer-middle-ul">
                                    <li>货到付款</li>
                                    <li>在线支付</li>
                                    <li>分期付款</li>
                                    <li>常见问题</li>
                                    <li>邮局汇款</li>
                                    <li>公司转账</li>
                                </ul>
                            </li>
                            <li class="max-li">
                                <h4>售后服务</h4>
                                <ul class="footer-middle-ul">                            
                                    <li>售后政策</li>
                                    <li>价格保护</li>
                                    <li>退款说明</li>
                                    <li>常见问题</li>
                                    <li>返修/退换货</li>
                                    <li>取消订单</li>
                                </ul>
                            </li>
                            <li class="max-li">
                                <h4>特色服务</h4>
                                <ul class="footer-middle-ul">
                                    <li>夺宝岛</li>
                                    <li>DIY装机</li>
                                    <li>延保服务</li>
                                    <li>品优购E卡</li>
                                    <li>品优购通信</li>
                                </ul>
                            </li>
                            <li class="max-li max-li-last">
                                <h4>帮助中心</h4>
                                <div class="ewm"></div>
                                <p>品优购客户端</p>
                            </li>
                        </ul>
                    </div>
                <div class="footer-end">
                <!-- 不要想多了，这个版权部分就是两个p -->
            <p class="end-p1">关于我们   <span class="sx2">|</span>   联系我们  <span class="sx2">|</span>   联系客服  <span class="sx2">|</span>  商家入驻  <span class="sx2">|</span>  营销中心  <span class="sx2">|</span>  手机品优购  <span class="sx2">|</span>  友情链接  <span class="sx2">|</span>  销售联盟  <span class="sx2">|</span>  品优购社区  <span class="sx2">|</span>  品优购公益  <span class="sx2">|</span>  English Site  <span class="sx2">|</span>   Contact U</p>
            <p class="end-p2">地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn <br>
                京ICP备08001421号京公网安备110108007702
                </p>
                </div>
                </div>
            </div>
        </div>
        <!-- footer部分 end   -->
</body>
<script src="jquery.min.js"></script>
<script src="shopcar.js"></script>
</html>

.shopcar-gwc{
    position: absolute;
    top: 34px;
    left: 189px;
    font-size: 20px;
    font-weight: 600;
}

.cart-filter-bar span{
    width: 74px;
    height: 32px;
    font-size: 16px;
    font-weight: 600;
    border-bottom: 1px solid #E2231A;
    padding: 5px;/*向内挤出5px，留出上下左右的缝隙，其实可以只给padding-bottom，在此效果相同*/
    color: #E2231A;;
}

.cart-thead{
    margin-top: 4px;
    width: 1200px;
    height: 32px;
    padding: 5px 0;/*从内部撑开上下的5px*/
    line-height: 32px;
    background-color: #f3f3f3;

}

.cart-thead .t-checkbox{
    width: 118px;
    padding-left: 15px;
}

.cart-thead .t-goods{
    width: 400px;
}

.cart-thead .t-price{
    width: 130px;
    text-align: right;
    padding-right: 30px;
}
.cart-thead .t-num{
    width: 150px;
    text-align: center;
}
.cart-thead .t-sum{
    width: 100px;
    text-align: right;
}
.cart-thead .t-action{
    width: 130px;
    text-align: right;
}

.cart-item{
    margin-top: 20px;
}

.cart-item .p-checkbox{
    width:  46px;
    height: 25px;
}

.cart-item .p-goods{
    width: 565px;
    height: 92px;
}

.cart-item .p-price{
    width: 110px;
    height: 18px;
}

.cart-item .p-num{
    width: 170px;
    height: 22px;
}

.cart-item .p-sum{
    width: 145px;
    height: 18px;
}

.cart-item{
    height: 160px;
}

.p-goods-hd {
    height: 87px;
    width: 87px;
    padding: 5px;
    border: 1px solid #ccc;;
}

.p-goods-bd{
    padding-left: 10px;
}

.cart-item{
    padding-top: 20px;
    /*发现设置完边框以后，挤在一起了，内部用padding*/
    border-style: solid;
    border-width: 2px 1px 1px;
    border-color: #aaa #f1f1f1 #f1f1f1;
}

.p-checkbox {
    padding-left: 15px;
}

.p-sum{
    font-weight: 600;
}

.p-num .itxt{
    float: left;
    width: 46px;
    border:1px solid #cacbcb ; 
    height: 18px;
    text-align: center;
    font-size: 12px;
    font-family: verdana;
    color: #333;
    margin-left: -1px;/*由于左右a与中间的input均有边框，因此中间input左右边框为2px，只想要1px，因此通过margin -1，左移，右移，盖住多余的1px*/
    margin-right: -1px;
    outline: none;
}

.p-num .increment,
.p-num .decrement{
    /*行内转为块，给宽高*/
   /*  display: inline-block; */
   float: left;
    width: 16px;
    height: 18px;
    border:1px solid #cacbcb;
    text-align: center;
}

.cart-item-last{
    margin-top: 20px;
    margin-bottom: 80px;
    width: 1200px;
    height: 52px;
    line-height: 52px;
    border: 1px solid #f0f0f0;
}

.remove-all{
    font-weight: 600;
}

.remove-checked{
    width: 120px;
    text-align: right;
}

.remove-all{
    width: 150px;
    text-align: center;
}


.amount-sum span{
    color:#E2231A;
    padding: 0 5px;
    font-weight: 800;
}

.price-sum span {
    font-size: 16px;
    color: #E2231A;
    font-weight: 600;
    padding-left: 8px;/*没有宽度随便给padding*/
}

.price-sum{
    margin: 0 15px 0;
}

.btn-area{
    width: 94px;
    height: 52px;
    background-color: #e54346;

    font-size: 18px;
    font-weight: 800;
    text-align: center;
    line-height: 52px;
    font-family: "Microsoft YaHei";
}

.btn-area a{
    color: #fff;
}

.check-cart-item{
    background-color: #fff4e8;
}

/*      实现功能：
            1.选中全选按钮，选中下方全部按钮,取消选中全选按钮，取消选中下方全部按钮 
                ---------------即将checkall的状态赋给j-checkbox，通过prop来实现效果。
            2.选中所有下方按钮，自动选中上方全选按钮(一个冒号)
                ----------------即关键看$(j-checkbox:checked).length，即选中的复选框个数与复选框总数是否相等，相等即将checkall通过prop将checked设置true
            3.点击操作列中的删除按钮，删除该行所对应的商品行
                -----------------即通过parents()找到该行对应的祖先元素item，然后删除该行所对应的item
            4.点击删除选中的商品按钮，删除选中的商品
                ------------------即直接删除选中的j-checkbox所在的行(item)，如果没选中则不进行操作,注意remove是最后写  元素.remove()
            5.点击清理购物车，删除所有商品
                -------------------即直接删除所有j-checkbox的祖先（item），通过隐式迭代即可完成。
            6.点击加号减号，对应实现其数加减效果并保存
                ---------------------元素.val()，获取input内的value值的特定用法
                --------------------首先获取其input内目前的值，然后根据加减对应a++,a--,再通过元素.val(a)直接修改其内部input的value值即可实现
            7.加号减号改变时，对应商品的小计价格同步变化
                ----------------------substr(1),去除最前面一位数，元素.toFixed(2)保留两位小数，注意不要放到外面，因为里面还有￥符号。
                ---------------------由于价格的变化是加减数量导致的，因此放到加减数量的事件里，精髓就是不要直接用元素*，而是要通过html()取和改元素内的值
            8.  $(this).siblings('.itxt').val(a)
                如果不写这句话 去写这句$('.itxt').val(a)，所有商品的数量均会一起变动。
                var money = $('.itxt').parents('.p-num').siblings('.p-price').html()
                如果不写这句话，所有的钱数均会一起变动且钱数相同
                var money= $('.p-price').html() 这是错误的，所有的价格均为第一个单价相乘的价格
            ________________________________________________________________________________________
                                以上弊端均为不写sibiling导致的，因钱数和个数不同，因此每行必须找到对应的数值，且赋给每行对应的sum，因此发生的问题

            9. 动态修改已经选了 x 件商品，计算总数，计算总钱
                    ------------------------均需要通过each循环完成，多次重复用到，只要改动就删除就要重新调用，因此单独写一个函数getsum()
            10.选中的j-checkbox所在的item盒子背景色变化，没选中的背景色不变       
                $('.j-checkbox').on("change",function(){
                if($(this).prop("checked"))   千万不要写 checked ，true ，else checked ，false  ，直接写checked即可实现效果
                $(this).parents('.cart-item').addClass('check-cart-item') 
                else
                $(this).parents('.cart-item').removeClass('check-cart-item')  
                发现加载页面默认第一个j-checkbox为选中状态，因此再html中特地在第一个checkbox中设置 checked='checked'
            11.如果用户直接在input内修改数量，也要进行其对应变化，即单独写为input写change事件重新重复一遍即可
                    ------------------------单独算修改的对应input所在行的小计的钱（单独写这部分），总数和总钱仅需重新调用即可
            }) 
            */
 


$(function(){

    getsum()
    /*上来默认加载一次，解决个数和钱数一打开不对的问题*/ 
    $('.checkall').on("click",function(){
        /*与此同时，最下方的checkall也跟随其同步调整，同一个$里面放多个元素中间用，隔开*/ 
        $('.j-checkbox , .checkall').prop('checked',$('.checkall').prop('checked'))
    })

    $('.j-checkbox').on("click",function(){
        /*查看选中的个数通过元素.lenth实现*/
        if($('.j-checkbox:checked').length===$('.j-checkbox').length)
        $('.checkall').prop('checked',true)
        else    /*一定记得要给每个通过类绑定的元素前加.，否则找不到，肯定失效*/ 
        $('.checkall').prop('checked',false)

        /* $(this).ToggleClass('check-cart-item') 不是对按钮加背景，而是对按钮所对应的行item加背景 */
        /* $(this).parents('.cart-item').ToggleClass('check-cart-item') */
    })

    $('.j-checkbox').on("change",function(){
        if($(this).prop("checked"))
        $(this).parents('.cart-item').addClass('check-cart-item') 
        else
        $(this).parents('.cart-item').removeClass('check-cart-item')  
    })

    $('.checkall').on("change",function(){
        /*因为checkall状态与j-checkbox相同，因此根据选中状态直接为.cart-item，而不是从this出发找他们，从而添加类（因为这里的关系已经明确）*/ 
        if($(this).prop("checked"))
        $('.cart-item').addClass('check-cart-item') 
        else
        $('.cart-item').removeClass('check-cart-item')  
    })  

    $('.p-action a').on("click",function(){
        $(this).parents(".cart-item").remove()
        getsum()
    })

    $('.remove-checked').on("click",function(){
        /*记得，要修改效果的位置如果是a，一定要在前面设置javascript:;，否则给效果的时候点击自动刷新看不出来！*/ 
      $('.j-checkbox:checked').parents('.cart-item').remove()
      getsum()
    })

    $('.remove-all').on("click",function(){
        $('.j-checkbox').parents('.cart-item').remove()
        getsum()
    })

    $('.decrement').on("click",function(){
        var a = $(this).siblings('.itxt').val()
       a--
       if(a<=0) a=0
       $(this).siblings('.itxt').val(a)

       //拿单价
       var  linemoney = $(this).parent().siblings('.p-price').html()
       //去符号
       linemoney = linemoney.substr(1)
       //改每行对应的总钱数，由于每行的数量与单价不一样，因此改的时候必须通过sibilings找到其对应的小计再调整数值，不能直接找到小计赋值！钱数不一样
       //加符号，算钱数，取小数
       $(this).parent().siblings('.p-sum').html("¥"+(linemoney*a).toFixed(2))

       //已经选了多少件商品，因加减个数导致的，写在其加减个数里面(宗旨为从个数出发，找其要改的位置在哪，进行对应行操作，)
        //这里需要通过each实现目标
        getsum()
    })

        function  getsum(){
            /*把算总数和算总钱单独写一个函数，为什么？
                 算总数都要用到each(循环)
                因为每次操作完后，例如各种删除完，都要重新统计总个数和总钱数，要重复写很多次，因此写到函数里*/ 
            var count=0;
            $('.itxt').each(function(i,DomElm){
                //这里的domelm就是便利中的每个input元素
                count+= parseInt($(DomElm).val())
                /*不转换为int，就会出现0111的情况*/ 
            })
            $('.amount-sum span').text(count)
            //总个数算完了
            var summoney=0;
            $('.p-sum').each(function(i,DomElm){
               summoney+= parseFloat($(DomElm).text().substr(1))
            })
            $('.price-sum').addClass('turnred') /*样式消失，重新为其添加样式*/ 
            $('.price-sum').html("¥"+summoney.toFixed(2))
        }

    $('.increment').on("click",function(){
        /*在此必须给限制，必须严谨！取得给的是自己的兄弟input内的数值，不是别的item内的数值！，否则出现问题，上面的会影响到下面的*/ 
        var a = $(this).siblings('.itxt').val()
        a++
        $(this).siblings('.itxt').val(a)

       //拿单价
       var  linemoney = $(this).parent().siblings('.p-price').html()
       //去符号
       linemoney = linemoney.substr(1)
       //改每行对应的总钱数，由于每行的数量与单价不一样，因此改的时候必须通过sibilings找到其对应的小计再调整数值，不能直接找到小计赋值！钱数不一样
       //加符号，算钱数，取小数
       $(this).parent().siblings('.p-sum').text("¥"+(linemoney*a).toFixed(2))
       getsum()
     })

     $('.itxt').on("change",function(){
       //找对应更改input位置数量
       var count1 = $(this).val()
       //找对应更改input位置钱
       /* var money1 = $(this).parents('.p-num').siblings('.p-price')  找的是对应元素的内容，而不是元素*/
       var money1 = $(this).parents('.p-num').siblings('.p-price').text() 
       //去除符号
       money1 = money1.substr(1)
       /*对应修改所在行小计*/ 
       $(this).parents('.p-num').siblings('.p-sum').html("¥"+(count1*money1).toFixed(2))

       /*再次调用函数，对总数和总钱数没有影响，因为函数只负责这两块，而之前特殊的行钱已经在上方单独写清楚了*/
       getsum() 

     })

})

在这里插入图片描述

学习前端的一只旺财

关注

11
点赞
踩
48

收藏

觉得还不错? 一键收藏
6
评论
品优购综合案例——购物车（JQ实现11个效果+Html+Css）之自学系列

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="css/comm
复制链接

扫一扫