Community
Learn
Tools Library
AI Tools
Leisure
search
English
Home > List of blog posts > Jquery实现购物车商品总价结算
Blogger Information
Blog 1
fans 0
comment 0
visits 2275
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
Jquery实现购物车商品总价结算
TengMr的前端博客
Original
2287 people have browsed it

html部分

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <title>小米商城</title>
    <meta charset="utf-8">
    <link rel="shortcut icon" type="image/x-icon" href="../static/img/footlogo.png" />
    <link rel="stylesheet" href="../static/css/cart.css">
    <link rel="stylesheet" type="text/css" href="../static/css/content.css">
    <link rel="stylesheet" href="../static/css/footer.css">
    <link rel="stylesheet" href="../static/font-awesome/css/font-awesome.min.css">
    <script src="../static/js/jq_3.3.1_mi.js"></script>
    <script src="../static/js/cart01.js"></script>
    <style>
    t{text-align: center}
    </style>
</head>
<body>
    <!-- 购物车头部 -->
    <div class="header">
        <div class="content">
            <div class="content-left">
                <a href="" class="logo"></a>
                <h1 class="title">我的购物车</h1>
                <h6 class="notice">温馨提示：产品是否***成功，以最终下单为准哦，请尽快结算</h6>
            </div>
            <div class="content-right">
                <div class="userinfo">
                    <div class="username">
                        <a href="javascript:void(0)" class="toUserInfo">我是某某某</a>
                        <ul>
                            <li class="infoitem">个人中心</li>
                            <li class="infoitem">评价晒单</li>
                            <li class="infoitem">我的喜欢</li>
                            <li class="infoitem">小米账户</li>
                            <li class="infoitem">退出登录</li>
                        </ul>
                    </div>
                    <i class="fa fa-angle-down fa-1x"></i>
                </div>
                <div class="toOrderDetail"><a href="./order.html">我的订单</a></div>
            </div>
        </div>
    </div>
    <!-- 购物车躯干部分 -->
    <div class="trunk">
        <!--购物车-->
        <div class="cart">
            <div class="list list-title">
                <div class="select select-all"><i class="fa fa-check" id="check-all"></i>全选</div>
                <div class="good-img"></div>
                <div class="good-name" style="font-size:14px; ">商品名称</div>
                <div class="good-price">单价</div>
                <div class="good-num">数量</div>
                <div class="good-total-price"style="color:#424242;">小计</div>
                <div class="operation">操作</div>
            </div>
            <div class="list list-item">
                <div class="select"><i class="fa fa-check"></i></div>
                <div class="good-img"><img src="../static/img/phone/phone1.png" alt=""></div>
                <div class="good-name"> 小米MIX 2S 全网通版 6GB内存 ***标准版 64GB 白色 64GB </div>
                <div class="good-price">3199元</div><!-- xx -->
                <div class="good-num">
                    <div class="num-input">
                        <button class="minus">-</button> <!-- 减号minus -->
                        <input type="text" value="1" class="num-value">
                        <button class="plus">+</button> <!-- 加号plus -->
                    </div>
                </div>
                <div class="good-total-price">3199元</div><!--  -->
                <div class="operation"><i class="fa fa-times"></i></div>
            </div>
            <div class="list list-item">
                <div class="select"><i class="fa fa-check"></i></div>
                <div class="good-img"><img src="../static/img/phone/phone1.png" alt=""></div>
                <div class="good-name"> 小米MIX 2S 全网通版 6GB内存 ***标准版 64GB 白色 64GB </div>
                <div class="good-price">3199元</div>
                <div class="good-num">
                    <div class="num-input">
                        <button class="minus">-</button>
                        <input type="text" value="1" class="num-value">
                        <button class="plus">+</button>
                    </div>
                </div>
                <div class="good-total-price">3199元</div>
                <div class="operation"><i class="fa fa-times"></i></div>
            </div>
            <div class="list list-item">
                <div class="select"><i class="fa fa-check"></i></div>
                <div class="good-img"><img src="../static/img/phone/phone1.png" alt=""></div>
                <div class="good-name"> 小米MIX 2S 全网通版 6GB内存 ***标准版 64GB 白色 64GB </div>
                <div class="good-price">3199元</div>
                <div class="good-num">
                    <div class="num-input">
                        <button class="minus">-</button>
                        <input type="text" value="1" class="num-value">
                        <button class="plus">+</button>
                    </div>
                </div>
                <div class="good-total-price">3199元</div>
                <div class="operation"><i class="fa fa-times"></i></div>
            </div>
            <div class="list list-total">
                <div class="list-total-left">
                    <span class="notice"><a href="">继续购物</a></span>
                    <span class="statistics">共 <span class="all-count">0</span> 件商品，已选择 <span class="select-count">0</span> 件</span>
                </div>
                <div class="list-total-right">
                    <div class="total-price">合计: <span class="sum-price">0</span> 元</div>
                    <a href="./close.html"><button class="submit-cart">去结算</button></a>
                </div>
            </div>
        </div>

        <!--其他商品推荐-->
        <div class="recommend" style="margin-top: 60px;">
            <p>买购物车中商品的人还买了</p>
        </div>
  
    <div class="content-bottom">
            <div class="content-bottom1">
                <!--手机-->
                <div class="content-bottom1_shop">
                    <div class="content-bottom1_shop1"></div>
                    <div class="content-bottom1_shop2">
                        <div class="content-bottom1_1">
                            <div class="content-bottom1_a">
                                <img class="bottomImg" src="../static/img/buy/手机1.jpg" alt="">
                                <h3 class="bottomTitle"><a href="">小米5X 4GB+64GB </a> </h3>
                                <p class="bottomDesc">光学变焦双摄，拍人更美</p>
                                <p class="bottomPrice">
                                    <span style="color:#ff6709">1499 元</span>
                                </p>
                            </div>
                            <div class="content-bottom1_b">
                                <span class="bottomFlagRed">享八折</span>
                                <img class="bottomImg" src="../static/img/buy/手机2.jpg" alt="">
                                <h3 class="bottomTitle"><a href="">小米MIX 2 全***尊享版 </a></h3>
                                <p class="bottomDesc">全面屏2.0，Unibody 全***</p>
                                <p class="bottomPrice">
                                    <span style="color:#ff6709">3699元</span>
                                    <del>4699 元</del>
                                </p>
                            </div>
                            <div class="content-bottom1_c">
                                <img class="bottomImg" src="../static/img/buy/手机3.jpg" alt="">
                                <h3 class="bottomTitle"><a href="">红米5A 2GB内存 </a></h3>
                                <p class="bottomDesc">8天超长待机，137g轻巧机身</p>
                                <p class="bottomPrice">
                                    <span style="color:#ff6709">599元</span>
                                </p>
                            </div>
                            <div class="content-bottom1_d">
                                <img class="bottomImg" src="../static/img/buy/手机4.jpg" alt="">
                                <h3 class="bottomTitle"><a href="">红米5 Plus 3GB+32GB </a></h3>
                                <p class="bottomDesc">全面屏手机，4000mAh大电量</p>
                                <p class="bottomPrice">
                                    <span style="color:#ff6709">999元</span>
                                </p>
                            </div>
                        </div>
                        <div class="content-bottom1_2">
                            <div class="content-bottom1_e">
                                <img class="bottomImg" src="../static/img/buy/手机5.jpg" alt="">
                                <h3 class="bottomTitle"><a href="">红米S2 3GB+32GB </a></h3>
                                <p class="bottomDesc">前置1600万超大像素智能美拍</p>
                                <p class="bottomPrice">
                                    <span style="color:#ff6709">999元</span>
                                </p>
                            </div>
                            <div class="content-bottom1_f">
                                <img class="bottomImg" src="../static/img/buy/手机6.jpg" alt="">
                                <h3 class="bottomTitle"><a href="">小米Note 3 4GB+64GB </a></h3>
                                <p class="bottomDesc">1600万美颜自拍，2倍变焦双摄</p>
                                <p class="bottomPrice">
                                    <span style="color:#ff6709">1799元</span>
                                    <del>1999元</del>
                                </p>
                            </div>
                            <div class="content-bottom1_g">
                                <img class="bottomImg" src="../static/img/buy/手机7.jpg" alt="">
                                <h3 class="bottomTitle"><a href="">红米5 2GB+16GB </a></h3>
                                <p class="bottomDesc">5.7英寸全面屏，前置柔光自拍</p>
                                <p class="bottomPrice">
                                    <span style="color:#ff6709">799元</span>
                                </p>
                            </div>
                            <div class="content-bottom1_h">
                                <img class="bottomImg" src="../static/img/buy/手机8.jpg" alt="">
                                <h3 class="bottomTitle"><a href="">小米Max 2 4GB+64GB </a></h3>
                                <p class="bottomDesc">6.44''大屏，5300mAh 充电宝级的大电量</p>
                                <p class="bottomPrice">
                                    <span style="color:#ff6709">1499元</span>
                                    <del>1699元</del>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="clear"></div>
            </div>
        </div>
      </div>  


     <!--   网页底部   -->
    <div class="footer-top">
        <div class="footer-top_li">
            <div class="footer-top_li_1">
                <a href="#"><i class="fa fa-wrench"></i>预约维修服务</a><span></span>
                <a href="#"><i class="fa fa-rotate-right "></i>7天无理由退货</a><span></span>
                <a href="#"><i class="fa fa-refresh"></i>15天免费换货</a><span></span>
                <a href="#"><i class="fa fa-gift"></i>满150元包邮</a><span></span>
                <a href="#"><i class="fa fa-map-marker"></i>520余家售后网点</a>
            </div>
            <span class="separate"></span>
            <div class="footer-top_li_2">
                <div class="footer-top_li_a">
                    <dl>
                        <dt>帮助中心</dt>
                        <dd><a href="">账户管理</a></dd>
                        <dd><a href="">购物指南</a></dd>
                        <dd><a href="">订单操作</a></dd>
                    </dl>
                    <dl>
                        <dt>服务支持</dt>
                        <dd><a href="">售后政策</a></dd>
                        <dd><a href="">自助服务</a></dd>
                        <dd><a href="">相关下载</a></dd>
                    </dl>
                    <dl>
                        <dt>线下门店</dt>
                        <dd><a href="">小米之家</a></dd>
                        <dd><a href="">服务网点</a></dd>
                        <dd><a href="">授权体验店</a></dd>
                    </dl>
                    <dl>
                        <dt>关于小米</dt>
                        <dd><a href="">了解小米</a></dd>
                        <dd><a href="">加入小米</a></dd>
                        <dd><a href="">投资者关系</a></dd>
                    </dl>
                    <dl>
                        <dt>关注我们</dt>
                        <dd><a href="">新浪微博</a></dd>
                        <dd><a href="">官网微博</a></dd>
                        <dd><a href="">联系我们</a></dd>
                    </dl>
                    <dl>
                        <dt>特色服务</dt>
                        <dd><a href="">F码通道</a></dd>
                        <dd><a href="">礼物码</a></dd>
                        <dd><a href="">防伪查询</a></dd>
                    </dl>
                    <div class="connect">
                        <p class="telephone">Feir-520-1314</p>
                        <p class="time">周一至周日 8:00-18:00<br>(仅收市话费)</p>
                        <button><span class="fa fa-commenting "></span> 联系客服</button>
                    </div>
                </div>
                <div class="footer-top_li_b"></div>
            </div>
        </div>
    </div>
    <div class="footer-bottom">
        <div class="footer-bottom_li">
            <div class="footer-bottom_li_1">
                <img src="./static/img/footlogo.png" alt="" class="logoBottom">
            </div>
            <div class="footer-bottom_li_2">
                <div class="footer-bottom_li_a">
                    <ul>
                        <li>小米商城<span></span></li>
                        <li>MIUI<span></span></li>
                        <li>米家<span></span></li>
                        <li>米聊<span></span></li>
                        <li>多看<span></span></li>
                        <li>游戏<span></span></li>
                        <li>路由器<span></span></li>
                        <li>米粉卡<span></span></li>
                        <li>政企服务<span></span></li>
                        <li>小米天猫店<span></span></li>
                        <li>隐私政策<span></span></li>
                        <li>问题反馈<span></span></li>
                        <li>Select Region</li>
                    </ul>
                </div>
                <div class="footer-bottom_li_b">
                    <a href="">©mi.com</a>
                    京ICP证110507号
                    <a href="">京ICP备10046444号</a>
                    <a href="">京公网安备11010802020134号</a>
                    <a href="">京网文[2014]0059-0009号</a>
                    <br>
                    违法和不良信息举报电话：185-0130-1238，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试
                </div>
            </div>
            <div class="footer-bottom_li_3">
                <img src="../static/img/footericon1.png" alt="" class="icon">
                <img src="../static/img/footericon2.png" alt="" class="icon">
                <img src="../static/img/footericon3.png" alt="" class="icon">
                <img src="../static/img/footericon4.png" alt="" class="icon">
                <img src="../static/img/footericon5.png" alt="" class="icon">
            </div>
            <div class="footer-bottom_li_4">
               探索黑科技，小米为发烧而生！
            </div>   
        </div>  
    </div>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

实例

*{margin: 0px;padding: 0px;border: none;}
.clear{clear: both;}
li{list-style: none;}
a{text-decoration: none;color: #ccc;cursor:pointer;}
/*头部, 躯干宽度设定*/
.header,.trunk{width: 100%}
/*头部边框, 高度设定*/
.header{height: 100px;border-bottom:  2px solid #ff6700;}
/*躯干背景颜色和溢出设定*/
.trunk{background-color:#f5f5f5;overflow: hidden;}
/*内容总宽度, 居中设定*/
.header>.content,.trunk>.cart,.trunk>.recommend{width: 1226px;margin:0 auto;}.cart{padding-top: 38px;}

.header .content-left{float: left;}
.header .content-right{float: right;}
.header .logo,
.header .title,
.header .notice,
.header .userinfo,
.header .toOrderDetail{float: left;margin-top: 26px;}
.header .logo{width: 48px;height: 48px;margin-right:45px;background: url('../img/footlogo.png') center center;}
.header .title{font-size: 28px;line-height: 48px; margin-right: 15px;font-weight: 400;color:#424242;}
.header .notice{font-size:12px;line-height: 48px;margin-top: 32px;font-weight: 400;color: #757575;}
.header .userinfo{width: 120px;line-height: 48px;margin-top:28px;font-size: 12px;color:#757575;position: relative;}
.header .toOrderDetail{line-height: 48px;margin-top:28px;font-size:12px; color:#757575;}
.userinfo .username a,
.header .toOrderDetail a{color:#757575;}


.userinfo .username ul{position:absolute;width: 120px;padding:7px 0;display:none;background-color: #fff;margin-left: -10px;text-align: center;box-shadow:0 2px 10px rgba(0,0,0,0.15)}
.userinfo .username li{height: 30px;width: 100%;color:#757575;line-height: 30px;}
.userinfo :hover ul{display:block;}
.userinfo .username li:hover{color:#ff6700;background-color:#f5f5f5;}
.userinfo i{position:absolute;top:20px;right:20px;}

.userinfo :hover a,
.userinfo :hover i{color:#ff6700;}

.cart>.list{background-color: #fff;overflow: hidden;}
.list div{float: left;}
.cart .select{width: 110px;text-align: center;}
.cart .select i{font-size:13px;  display:inline-block;height: 15px;width:15px;line-height: 15px;background-color:#fff;color:rgba(0,0,0,0);border:1px solid #e0e0e0;margin:0 15px 0 24px;cursor: pointer;}
/*.cart .select i:hover{color:#757575}*/
.cart .select .checked{color:#fff;background-color: #ff6700;border:1px solid #ff6700;}
.cart .good-img{width: 120px;cursor: pointer;}
.cart .good-img img{width: 60px;height: 60px;margin-top: 15px;}
.cart .good-name{width: 380px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;cursor: pointer;font-size: 17px;color: #424242;}
.cart .good-price{width:75px;padding-right: 84px;text-align: right;}

.cart .good-num{width: 150px;text-align: center;}
.good-num .num-input{padding:0;margin-top:24px;width: 150px;height: 40px;border:1px solid #e0e0e0;padding-top: 1px;}
.num-input button{width: 38px;height:38px;text-align: center;line-height: 38px;color:#757575;background-color:#fff;font-size: 20px;}
.num-input button:hover{background-color: #e0e0e0}
.num-input .minus{float: left;}
.num-input .plus{float: right;}
.num-input .num-value{float: left; width: 72px;height: 38px;text-align: center;font-size: 16px;}

.cart .good-total-price{width: 120px;padding-right: 81px;text-align: right;color: #FF6A00;}
.cart .operation{width: 80px;padding-right: 26px;text-align: center;}
.cart .operation i{display:inline-block;width: 20px;height: 20px;border-radius: 10px;color:#757575;line-height: 20px;font-size: 12px; }
.cart .operation i:hover{background-color: #F07474;color:#fff;cursor: pointer;}

.list-title div{height: 70px;line-height: 70px;font-size: 14px;}
.list-item div{height: 86px;padding:15px 0;line-height: 86px;border-top:1px solid #e0e0e0;}
.list-total{margin: 20px 0px;height: 50px;line-height: 50px;font-size:14px;}
.list-total .list-total-left{float: left;}
.list-total .list-total-right{float: right;}
.list-total-left .notice{margin-left: 32px;font-size: 12px;background-color:#fff;color: #424242;}
.list-total-left .notice a{color: #424242;font-size: 14px;}
.list-total-left .statistics{margin-left: 16px;padding-left: 16px;font-size: 12px;border-left: 1px solid #eee;color: #424242;font-size: 14px;}
.statistics span{color:#FF6A00;}
.list-total-right .total-price{float: left;font-size: 14px;color: #ff6700}
.list-total-right .total-price .sum-price{font-size: 24px;}
.list-total-right .submit-cart{float: right;height:50px;width: 200px;background-color:#ff6700;color:#fff;font-size: 18px;margin-left: 60px;}

/*商品推荐*/
.recommend{position: relative;border-top:1px solid #ccc;height: 40px;}
.recommend p{font-size: 31px;color: #757575;background: #F5F5F5;width:460px;height: 40px;position: absolute;top: -20px; left:380px;text-align: center;}

.content-bottom{background:#F5F5F5;padding-bottom:60px; }
.content-bottom1{width: 1226px; margin:0px auto;  }
.content-bottom1_shop{height: 614px;width: 1226px;margin-top: 10px;}
.content-bottom1_shop1{height: 614px;width:234px;background: url(../img/buy/手机AD.jpg);margin-right:10px;float:left;}
.content-bottom1_shop2{height: 614px;width:982px;float:left;}
.content-bottom1_1 div{height:300px;width: 235px;}
.content-bottom1_a{margin-right:12.7px;background:#ccc;float: left;}
.content-bottom1_b{margin-right:12.7px;background:#ccc;float: left;}
.content-bottom1_c{margin-right:12.7px;background:#ccc;float: left;}
.content-bottom1_d{background:#ccc;float: left;}
.content-bottom1_2 div{height:300px;width: 235px;margin-top: 14px;}
.content-bottom1_e{margin-right:12.7px;background:#ccc;float: left;}
.content-bottom1_f{margin-right:12.7px;background:#ccc;float: left;}
.content-bottom1_g{margin-right:12.7px;background:#ccc;float: left;}
.content-bottom1_h{background:#ccc;float: left;}

运行实例 »

点击 "运行实例" 按钮查看在线实例

$(function(){
  // 初始化
  doPrice()
  // 首页先获取到fa-check 口 的外边框标签
  $('.fa-check').mouseover(function(){
    // ($(this).attr('class')=.fa-check不等于.fa fa-check checked √ 执行{}里面的函数。
    if($(this).attr('class')!='fa fa-check checked'){
      $(this).css('color','#ff6700');
    }
  })
  $('.fa-check').mouseleave(function(){
    $(this).css('color','#fff');
  })
  
// 普通选择 
$('.fa-check').click(function(){
  var cla = $(this).attr('class');
  // 判断fa-check不等于fa fa-check checked
  if(cla!='fa fa-check checked'){
    $(this).attr('class','fa fa-check checked')
  }else{
    $(this).attr('class','fa fa-check');
  }
  doCheckAll();
  doPrice();
});

// 全选
$('#check-all').click(function(){
    var cla = $(this).attr('class');
    if(cla!='fa fa-check checked'){
      $('.fa-check').attr('class','fa fa-check checked');
    }else{
      $('.fa-check').attr('class','fa fa-check');
    }
    doPrice();
})
// 检查是否全选
function doCheckAll(){
  // allitem的数量是  list-item*fa-check 小框框的长度
  var allitem=$('.list-item i[class*="fa-check"]').length;
  // checkeditem的数量是被选中的长度
  var checkeditem=$('.list-item i[class$="checked"]').length;
  if(allitem!=checkeditem){
    // 全选按钮没被选中
    $('#check-all').attr('class','fa fa-check');
  }else{
    // 全选全被选中那么就被选中
    $('#check-all').attr('class','fa fa-check checked')
  }
}
// 加减按钮

// 首先获取到加的按钮的class连上点击事件
$('.plus').click(function(){
  // 声明一个变量plusvalue获取到input的val值,下面的this是指获取到plus，
  // 然后利用siblings() 方法获取DOM同胞元素的值找到input的的value值
  var nowvalue=$(this).siblings('input').val();
  // 那么nowvalue已经获取到input的文本value值了，然后我们把input文本的value转成整型
  var nowvalue=parseInt(nowvalue);
  // 声明一个变量用于存放
  // var currentvalue=0;
      currentvalue=nowvalue+1;
  $(this).siblings('input').val(currentvalue);
  // 小计   parseFloat只获取数字 ( 找到单个商品当前元素的父级因为一个 .parents()获取找到父级标签),siblings找到同胞元素价格的标签qu
  var danjia=parseFloat($(this).parents('.good-num').siblings('.good-price').html());
  var xiaoji=danjia*currentvalue;
  // 页面中输出
  $(this).parents('.good-num').siblings('.good-total-price').html(xiaoji+'元');
  doPrice();
})

$('.minus').click(function(){
  //老套路先获取到input框的value的值
  var nowvalue=$(this).siblings('input').val();
  var nowvalue=parseInt(nowvalue);
  var currentvalue=0;
  // 三元运算 “条件”  “真结果” '?'相当于eles “假结果”。velue值等于1那就等于1，大于1的时候-1生效
  nowvalue<=1?currentvalue=1:currentvalue=nowvalue-1;
  // 输出currentvalue的结果  方法如下!
  $(this).siblings('input').val(currentvalue);
  var danjia=parseFloat($(this).parents('.good-num').siblings('.good-price').html());
  var xiaoji=danjia*currentvalue;
  // 页面中输出
  $(this).parents('.good-num').siblings('.good-total-price').html(xiaoji+'元');
  doPrice();
})

// 统计所有勾选的值
function doPrice(){
  // $获取.list-item 下  i标签然后[获取class$所有带checked的标签]然后必须是.select下同胞元素.good-total-price
  var checkeditems=$('.list-item i[class$="checked"]').parents('.select').siblings('.good-total-price');
  // 存放总价totalprice
  var totalprice=0;
  // i=0，那么用户每点击一次就checkeditems.length+1，也就是说每点击一次i的值就加1
  for(var i=0;i<checkeditems.length;i++){
    totalprice+=parseFloat(checkeditems[i].innerHTML);
  }
  $('.sum-price').html(totalprice)
}
})


Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post