jquery仿淘宝购物车页面商品结算（附源码） |
您所在的位置：网站首页 › 一号店首页html代码怎么写出来 › jquery仿淘宝购物车页面商品结算（附源码） |
jquery仿淘宝购物车页面商品结算（附源码）
|
1、效果图如下：
2、源码如下： html部分： doctype html> 购物车 全选 商品信息 商品参数 单价 数量 金额 操作 店铺：搜猎人艺术生活 夏季男士迷彩无袖T恤圆领潮流韩版修身男装背心青年时尚打底衫男 规格：默认 尺寸：16*16*3(cm) ￥980 - + ￥980 移除商品 夏季男士迷彩无袖T恤圆领潮流韩版修身男装背心青年时尚打底衫男 规格：默认 尺寸：16*16*3(cm) ￥780 - + ￥780 移除商品 夏季男士迷彩无袖T恤圆领潮流韩版修身男装背心青年时尚打底衫男 规格：默认 尺寸：16*16*3(cm) ￥180 - + ￥180 移除商品 店铺：卷卷旗舰店 夏季男士迷彩无袖T恤圆领潮流韩版修身男装背心青年时尚打底衫男 规格：默认 尺寸：16*16*3(cm) ￥1980 - + ￥1980 移除商品 夏季男士迷彩无袖T恤圆领潮流韩版修身男装背心青年时尚打底衫男 规格：默认 尺寸：16*16*3(cm) ￥480 - + ￥480 移除商品 店铺：卷卷旗舰店 夏季男士迷彩无袖T恤圆领潮流韩版修身男装背心青年时尚打底衫男 规格：默认 尺寸：16*16*3(cm) ￥1980 - + ￥1980 移除商品 夏季男士迷彩无袖T恤圆领潮流韩版修身男装背心青年时尚打底衫男 规格：默认 尺寸：16*16*3(cm) ￥480 - + ￥480 移除商品 已选商品0件 共计: 0.00 结算 删除宝贝X 您确认要删除该宝贝吗？ 确定关闭
js部分： /** * Created by Administrator on 2019/5/24. */ $(function () { //全局的checkbox选中和未选中的样式 var $allCheckbox = $('input[type="checkbox"]'), //全局的全部checkbox $wholeChexbox = $('.whole_check'), $cartBox = $('.cartBox'), //每个商铺盒子 $shopCheckbox = $('.shopChoice'), //每个商铺的checkbox $sonCheckBox = $('.son_check'); //每个商铺下的商品的checkbox $allCheckbox.click(function () { if ($(this).is(':checked')) { $(this).next('label').addClass('mark'); } else { $(this).next('label').removeClass('mark') } }); //===============================================全局全选与单个商品的关系================================ $wholeChexbox.click(function () { var $checkboxs = $cartBox.find('input[type="checkbox"]'); if ($(this).is(':checked')) { $checkboxs.prop("checked", true); $checkboxs.next('label').addClass('mark'); } else { $checkboxs.prop("checked", false); $checkboxs.next('label').removeClass('mark'); } totalMoney(); }); $sonCheckBox.each(function () { $(this).click(function () { if ($(this).is(':checked')) { //判断：所有单个商品是否勾选 var len = $sonCheckBox.length; var num = 0; $sonCheckBox.each(function () { if ($(this).is(':checked')) { num++; } }); if (num == len) { $wholeChexbox.prop("checked", true); $wholeChexbox.next('label').addClass('mark'); } } else { //单个商品取消勾选，全局全选取消勾选 $wholeChexbox.prop("checked", false); $wholeChexbox.next('label').removeClass('mark'); } }) }) //=======================================每个店铺checkbox与全选checkbox的关系/每个店铺与其下商品样式的变化=================================================== //店铺有一个未选中，全局全选按钮取消对勾，若店铺全选中，则全局全选按钮打对勾。 $shopCheckbox.each(function () { $(this).click(function () { if ($(this).is(':checked')) { //判断：店铺全选中，则全局全选按钮打对勾。 var len = $shopCheckbox.length; var num = 0; $shopCheckbox.each(function () { if ($(this).is(':checked')) { num++; } }); if (num == len) { $wholeChexbox.prop("checked", true); $wholeChexbox.next('label').addClass('mark'); } //店铺下的checkbox选中状态 $(this).parents('.cartBox').find('.son_check').prop("checked", true); $(this).parents('.cartBox').find('.son_check').next('label').addClass('mark'); } else { //否则，全局全选按钮取消对勾 $wholeChexbox.prop("checked", false); $wholeChexbox.next('label').removeClass('mark'); //店铺下的checkbox选中状态 $(this).parents('.cartBox').find('.son_check').prop("checked", false); $(this).parents('.cartBox').find('.son_check').next('label').removeClass('mark'); } totalMoney(); }); }); //========================================每个店铺checkbox与其下商品的checkbox的关系====================================================== //店铺$sonChecks有一个未选中，店铺全选按钮取消选中，若全都选中，则全选打对勾 $cartBox.each(function () { var $this = $(this); var $sonChecks = $this.find('.son_check'); $sonChecks.each(function () { $(this).click(function () { if ($(this).is(':checked')) { //判断：如果所有的$sonChecks都选中则店铺全选打对勾！ var len = $sonChecks.length; var num = 0; $sonChecks.each(function () { if ($(this).is(':checked')) { num++; } }); if (num == len) { $(this).parents('.cartBox').find('.shopChoice').prop("checked", true); $(this).parents('.cartBox').find('.shopChoice').next('label').addClass('mark'); } } else { //否则，店铺全选取消 $(this).parents('.cartBox').find('.shopChoice').prop("checked", false); $(this).parents('.cartBox').find('.shopChoice').next('label').removeClass('mark'); } totalMoney(); }); }); }); //=================================================商品数量============================================== var $plus = $('.plus'), $reduce = $('.reduce'), $all_sum = $('.sum'); $plus.click(function () { var $inputVal = $(this).prev('input'), $count = parseInt($inputVal.val())+1, $obj = $(this).parents('.amount_box').find('.reduce'), $priceTotalObj = $(this).parents('.order_lists').find('.sum_price'), $price = $(this).parents('.order_lists').find('.price').html(), //单价 $priceTotal = $count*parseInt($price.substring(1)); $inputVal.val($count); $priceTotalObj.html('￥'+$priceTotal); if($inputVal.val()>1 && $obj.hasClass('reSty')){ $obj.removeClass('reSty'); } totalMoney(); }); $reduce.click(function () { var $inputVal = $(this).next('input'), $count = parseInt($inputVal.val())-1, $priceTotalObj = $(this).parents('.order_lists').find('.sum_price'), $price = $(this).parents('.order_lists').find('.price').html(), //单价 $priceTotal = $count*parseInt($price.substring(1)); if($inputVal.val()>1){ $inputVal.val($count); $priceTotalObj.html('￥'+$priceTotal); } if($inputVal.val()==1 && !$(this).hasClass('reSty')){ $(this).addClass('reSty'); } totalMoney(); }); $all_sum.keyup(function () { var $count = 0, $priceTotalObj = $(this).parents('.order_lists').find('.sum_price'), $price = $(this).parents('.order_lists').find('.price').html(), //单价 $priceTotal = 0; if($(this).val()==''){ $(this).val('1'); } $(this).val($(this).val().replace(/\D|^0/g,'')); $count = $(this).val(); $priceTotal = $count*parseInt($price.substring(1)); $(this).attr('value',$count); $priceTotalObj.html('￥'+$priceTotal); totalMoney(); }) //======================================移除商品======================================== var $order_lists = null; var $order_content = ''; $('.delBtn').click(function () { $order_lists = $(this).parents('.order_lists'); $order_content = $order_lists.parents('.order_content'); $('.model_bg').fadeIn(300); $('.my_model').fadeIn(300); }); //关闭模态框 $('.closeModel').click(function () { closeM(); }); $('.dialog-close').click(function () { closeM(); }); function closeM() { $('.model_bg').fadeOut(300); $('.my_model').fadeOut(300); } //确定按钮，移除商品 $('.dialog-sure').click(function () { $order_lists.remove(); if($order_content.html().trim() == null || $order_content.html().trim().length == 0){ $order_content.parents('.cartBox').remove(); } closeM(); $sonCheckBox = $('.son_check'); totalMoney(); }) //======================================总计========================================== function totalMoney() { var total_money = 0; var total_count = 0; var calBtn = $('.calBtn a'); $sonCheckBox.each(function () { if ($(this).is(':checked')) { var goods = parseInt($(this).parents('.order_lists').find('.sum_price').html().substring(1)); var num = parseInt($(this).parents('.order_lists').find('.sum').val()); total_money += goods; total_count += num; } }); $('.total_text').html('￥'+total_money); $('.piece_num').html(total_count); $('#order_num').html(total_count); // console.log(total_money,total_count); if(total_money!=0 && total_count!=0){ if(!calBtn.hasClass('btn_sty')){ calBtn.addClass('btn_sty'); } }else{ if(calBtn.hasClass('btn_sty')){ calBtn.removeClass('btn_sty'); } } } }); css部分： 两个文件，carts.css 和 reset.css /* 清除内外边距 */ body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */ dl, dt, dd, ul, ol, li, /* list elements 列表元素 */ pre, /* text formatting elements 文本格式元素 */ fieldset, lengend, button, input, textarea, /* form elements 表单元素 */ th, td { /* table elements 表格元素 */ margin: 0; padding: 0; } /* 设置默认字体 */ body, button, input, select, textarea { /* for ie */ /*font: 12px/1 Tahoma, Helvetica, Arial, "宋体", sans-serif;*/ font: 12px/1 Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif; /* 用 ascii 字符表示，使得在任何编码下都无问题 */ } h1 { font-size: 18px; /* 18px / 12px = 1.5 */ } h2 { font-size: 16px; } h3 { font-size: 14px; } h4, h5, h6 { font-size: 100%; } address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */ code, kbd, pre, samp, tt { font-family: "Courier New", Courier, monospace; } /* 统一等宽字体 */ small { font-size: 12px; } /* 小于 12px 的中文很难阅读，让 small 正常化 */ /* 重置列表元素 */ ul, ol { list-style: none; } /* 重置文本格式元素 */ a { text-decoration: none; color: #000; } /*a:hover { text-decoration: underline; }*/ abbr[title], acronym[title] { /* 注：1.ie6 不支持 abbr; 2.这里用了属性选择符，ie6 下无效果 */ border-bottom: 1px dotted; cursor: help; } q:before, q:after { content: ''; } /* 重置表单元素 */ legend { color: #000; } /* for ie6 */ fieldset, img { border: none; } /* img 搭车：让链接里的 img 无边框 */ /* 注：optgroup 无法扶正 */ button, input, select, textarea { font-size: 100%; /* 使得表单元素在 ie 下能继承字体大小 */ } /* 重置表格元素 */ table { border-collapse: collapse; border-spacing: 0; } /* 重置 hr */ hr { border: none; height: 1px; } /* 让非ie浏览器默认也显示垂直滚动条，防止因滚动条引起的闪烁 */ html { overflow-y: scroll; } /* 浮动 */ .fl { float: left } .fr { float: right } /* 清除浮动 */ .clearfix:after { content: " "; display: block; clear: both; visibility: hidden; }
cart.css部分： html,body{ position: relative; width: 100%; min-height: 950px; } input[type="checkbox"]{ display: none; } label{ position: relative; display: inline-block; z-index: 1; border: 1px solid #b8b8b8; margin-left: 10px; border-radius: 1px; width: 12px; height: 12px; cursor: pointer; } label.mark{ background: url("../images/mark1.png") no-repeat -1px -1px; } a:hover{ color: #ff873e; text-decoration: underline; } .cartMain{ position: relative; width: 1200px; min-width: 1200px; max-width: 1200px; margin: 0 auto; padding: 0px 0px 100px; min-height: 210px; } /*购物车头部*/ .cartMain_hd{ width: 100%; height: 50px; line-height: 50px; color: #3c3c3c; } .cartMain_hd .cartTop{ height: 50px; } .cartMain_hd .cartTop .list_chk{ width: 80px; text-indent: 30px; } .cartMain_hd .cartTop .list_con{ width: 312px; } .cartMain_hd .cartTop .list_chk label{ position: absolute; left: 10px; top:19px; margin: 0; } .cartMain_hd .cartTop .list_info{ padding: 0; text-indent: 15px; } .cartMain_hd .cartTop .list_con{ text-indent: 140px; } .cartBox{ width: 100%; margin-bottom: 15px; } .cartBox .shop_info{ position: relative; width: 100%; height: 38px; background-color: #fff; line-height: 38px; vertical-align: baseline; } .cartBox .shop_info .all_check{ position: relative; float: left; width: 30px; height: 38px; } .cartBox .shop_info .all_check input[type="checkbox"]{ position: absolute; z-index: 0; left: -20px; top: -20px; } .cartBox .shop_info .all_check .shop{ position: absolute; top:13px; } .cartBox .shop_info .shop_name{ float: left; } /*商品列表*/ .cartBox .order_content{ border: 1px solid #ccc; } .cartBox .order_content a{ display: block; } .order_lists{ width: 100%; height: 130px; border-bottom: 1px solid #e7e7e7; } .order_lists:last-child{ border-bottom: none; } .order_lists li{ float: left; height: 100%; } .order_lists .list_chk{ position: relative; width: 50px; } .order_lists .list_chk input[type="checkbox"]{ position: absolute; z-index: 0; left: -20px; top: -20px; } .order_lists .list_chk label{ margin: 20px 0 0 24px; } .order_lists .list_con{ width: 342px; } .order_lists .list_con .list_img{ width: 90px; height: 90px; margin-top: 20px; float: left; } .order_lists .list_con .list_img img{ width: 100%; vertical-align: top; } .order_lists .list_con .list_text{ margin: 20px 0 0 10px; line-height: 18px; width: 200px; float: left; } .order_lists .list_con .list_text a{ color: #3c3c3c; } .order_lists .list_con .list_text a:hover{ color: #ff873e; text-decoration: underline; } .order_lists .list_info{ width: 252px; box-sizing: border-box; padding: 20px 0; } .order_lists .list_info p{ color: #9c9c9c; line-height: 18px; margin-left: 15px; } .order_lists .list_price{ width: 130px; } .order_lists .list_price .price{ margin-top: 20px; line-height: 18px; font-family: Verdana,Tahoma,arial; color: #3c3c3c; font-weight: bold; } .order_lists .list_amount{ width: 120px; } .order_lists .list_amount .amount_box{ margin-top: 20px; width: 77px; height: 25px; position: relative; } .order_lists .list_amount .amount_box input{ width: 39px; height: 15px; line-height: 15px; border: 1px solid #aaa; color: #343434; text-align: center; padding: 4px 0; background-color: #fff; z-index: 2; position: absolute; left: 18px; float: left; } .order_lists .list_amount .amount_box a{ float: left; height: 23px; width: 17px; border: 1px solid #e5e5e5; background: #f0f0f0; text-align: center; line-height: 23px; color: #444; position: absolute; top:0; } .order_lists .list_amount .amount_box a:hover{ border-color: #ff873e; text-decoration: none; color: #ff873e; z-index: 3; } .order_lists .list_amount .amount_box .reduce{ left: 0; } .order_lists .list_amount .amount_box .reSty{ color: #cbcbcb; } .order_lists .list_amount .amount_box .reSty:hover{ border-right: none; border-color: #e5e5e5; text-decoration: none; color: #cbcbcb; } .order_lists .list_amount .amount_box .plus{ border-left-color: transparent; right: 0; } .order_lists .list_sum{ width: 140px; } .order_lists .list_sum .sum_price{ line-height: 18px; margin-top: 20px; font-family: Verdana,Tahoma,arial; color: #ff0000; font-weight: bold; } .order_lists .list_op{ width: 164px; } .order_lists .list_op .del{ margin-top: 20px; line-height: 18px; } /*底部总计算价*/ .bar-wrapper{ width: 1200px; height: 50px; position: fixed; bottom: -1px; z-index: 99; background: #e5e5e5; } .bar-wrapper .bar-right{ float: right; color: #3c3c3c; } .bar-wrapper .bar-right strong{ color: #f40; } .bar-wrapper .bar-right .piece{ float: left; min-width: 110px; margin-right: 20px; height: 50px; line-height: 50px; } .bar-wrapper .bar-right .piece .piece_num{ display: inline-block; padding: 0 10px; font-weight: 700; font-size: 18px; font-family: tohoma,arial; } .bar-wrapper .bar-right .totalMoney{ float: left; min-width: 100px; height: 50px; line-height: 50px; } .bar-wrapper .bar-right .totalMoney .total_text{ float: right; font-weight: 400; font-size: 20px; font-family: Arial; vertical-align: middle; margin-right: 10px; margin-left: 15px; } .bar-wrapper .bar-right .calBtn{ float: left; } .bar-wrapper .bar-right .calBtn a{ display: block; width: 120px; height: 50px; color: #fff; background: #B0B0B0; cursor: not-allowed; font-size: 22px; letter-spacing: 5px; text-decoration: none; line-height: 50px; text-align: center; border-radius: 2px; } .bar-wrapper .bar-right .calBtn a.btn_sty{ background: #f40; cursor: pointer; } /*自己定义的模态框*/ .model_bg{ position: absolute; top:0; left: 0; bottom: 0; right: 0; background: rgba(0,0,0,.6); z-index: 999; display: none; } .my_model{ position: fixed; display: none; top:50%; left: 50%; margin-top: -50px; margin-left: -200px; z-index: 9999; width: 360px; height: 120px; border: 1px solid #aeaeae; border-radius: 3px; padding: 20px; background: #fff; } .my_model .title{ font-size: 14px; color: #3c3c3c; font-weight: 700; margin-bottom: 20px; } .my_model .title .closeModel{ float: right; cursor: pointer; } .my_model p{ line-height:16px; } .my_model .opBtn{ margin-top: 20px; } .my_model .opBtn a{ width: 58px; height: 28px; line-height: 28px; text-align: center; -webkit-border-radius: 1px; -moz-border-radius: 1px; -ms-border-radius: 1px; border-radius: 1px; display: inline-block; margin-right: 10px; font-weight: 700; } .my_model .dialog-sure{ background: #52a0e5; color: #fff; border: 1px solid #52a0e5; } .my_model .dialog-close{ background: #fff; border: 1px solid #d9d9d9; color: #3c3c3c; }
源码地址： 链接：https://pan.baidu.com/s/1HV1zk3QsJti8yyJ1gNBWnQ 提取码：skhx 如链接过期了私信或留言，看到会第一时间回复 干货分享，记得留个赞再走哦~
|
【本文地址】
今日新闻 |
推荐新闻 |