html展示購物車
js
$(function(){
// An highlighted block
// 計算方法
function counter(){
var items = $('.shopCarMain').find('.commodity');
var sum = 0,money = 0, counter = 0;
$.each(items,function(){
var price = parseInt($(this).find('.newPrice').text());
var number = parseInt($(this).find('.numberBox').text());
var isSelect = $(this).find('.commodity_em').is('.commodity_bg')
if(isSelect){
money = money + (price*number);
sum = sum + number;
counter++;
}
$('.totalPrice').text(money);
$('.settlementNumber').text(sum);
})
}
// 點選加号
$('.counter').on('click', '.icon-wuuiconsuoxiao', function () {
var input = $(this).siblings('.numberBox');
var inputVal = input.text();
var jianNewVal = inputVal - 1;
if (jianNewVal < 2) $(this).addClass('mj-disabled');
if (jianNewVal < 1) return;
input.text(jianNewVal);
counter()
});
// 點選減号
$('.counter').on('click', '.icon-wuuiconxiangjifangda', function () {
var input = $(this).siblings('.numberBox');
var inputVal = input.text();
var jiaNewVal = inputVal * 1 + 1;
if (jiaNewVal > 1) $(this).siblings('.icon-wuuiconsuoxiao').removeClass('mj-disabled');
input.text(jiaNewVal);
counter()
})
// 選中單個選項，計算，判斷是否全部選中
$('.commoditycheckBox').click(function(){
$(this).children('em').toggleClass('commodity_bg');
counter()
select()
})
// 判斷選中的長度和未選中的長度一樣，則是都選中，給全選也選中，否則全選是不打勾的
function select(){
var wxz = $('.commodity_em')
var xz = $('.commodity_bg')
if(wxz.length == xz.length){
$('.shopCarCheckBox em').addClass('all_commodity_bg')
}else{
$('.shopCarCheckBox em').removeClass('all_commodity_bg')
}
}
// 點選全選
$('.shopCarCheckBox').click(function(){
var fxk = $('.commodity_em')
var qx = $('.shopCarCheckBox em')
qx.toggleClass('all_commodity_bg')
var isSel = $(this).find('em').is('.all_commodity_bg')
if(isSel){
fxk.addClass('commodity_bg')
}else{
fxk.removeClass('commodity_bg')
}
counter()
})
// 點選删除 彈出彈框 進行确認是否删除，點選
$('.icon-shanchu').click(function(){
$(this).parents('.shopCarMain').siblings('.delDialog').fadeIn('fast');
var that = this;
$('.delDialog').on('click', '.delBtn', function () {
var dialog = $(this).parents('.delDialog');
dialog.fadeOut('fast');
$(that).parents('.commodity').remove();
counter()
cleanShopCar()
});
})
// 點選删除 彈出彈框
$('.delDialog').on('click', '.cancelBtn', function () {
var dialog = $(this).parents('.delDialog');
dialog.fadeOut('fast');
});
// 清空購物車，如果減為0 ，清空
function cleanShopCar(){
var pic = $('.commodity').length;
if(pic <= 0){
$('.totalPrice').text('0');
$('.settlementNumber').text('0')
$('.shopCarCheckBox em').removeClass('all_commodity_bg')
}
}
})
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/shopCar.css">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="iconfonts/normsDialogFonts/iconfont.css">
<link rel="stylesheet" href="iconfonts/fanhuiFonts/iconfont.css">
<link rel="stylesheet" href="iconfonts/shanchuFonts/iconfont.css">
<script type="text/javascript">
(function () {
var deviceWidth = document.documentElement.clientWidth;
document.documentElement.style.fontSize = (deviceWidth / 7.5) + "px";
window.onresize = function () {
var deviceWidth = document.documentElement.clientWidth;
document.documentElement.style.fontSize = (deviceWidth / 7.5) + "px";
}
})();
</script>
</head>
<body>
<div class="shopCarHeader">
<a href="javascript:void(0)">
<span class='iconfont icon-jiantou'></span>
</a>
<h3>購物車</h3>
</div>
<div class="shopCarMain">
<div class="commodity">
<div class="checkBoxContainer commoditycheckBox">
<em class="commodity_em"></em>
</div>
<img class="commodityImg" src="img/touxiang.jpg" alt="">
<div class="commodityInfomation">
<div>
<div class="delBox">
<p class="commodityTitle">肌肉放松按摩棒肌肉放松按摩棒肌肉放松按摩棒</p>
<span class="iconfont icon-shanchu"></span>
</div>
<div><span>顔色：</span><span>黑色</span></div>
</div>
<div class="buyNumber">
<div><span class="renminbi">¥</span><span class="newPrice">50</span></div>
<div class="counter">
<span class="iconfont icon-wuuiconsuoxiao"></span>
<span class="numberBox">1</span>
<span class="iconfont icon-wuuiconxiangjifangda"></span>
</div>
</div>
</div>
</div>
<div class="commodity">
<div class="checkBoxContainer commoditycheckBox">
<em class="commodity_em"></em>
</div>
<img class="commodityImg" src="img/touxiang.jpg" alt="">
<div class="commodityInfomation">
<div>
<div class="delBox">
<p class="commodityTitle">肌肉放松按摩棒肌肉放松按摩棒肌肉放松按摩棒</p>
<span class="iconfont icon-shanchu"></span>
</div>
<div><span>顔色：</span><span>黑色</span></div>
</div>
<div class="buyNumber">
<div><span class="renminbi">¥</span><span class="newPrice">50</span></div>
<div class="counter">
<span class="iconfont icon-wuuiconsuoxiao"></span>
<span class="numberBox">1</span>
<span class="iconfont icon-wuuiconxiangjifangda"></span>
</div>
</div>
</div>
</div>
</div>
<div class="delDialog">
<div class="delDialogContent">
<div class="delDialogTitle">确定要删除該商品嗎？</div>
<div class="delDialogBtn">
<span class="cancelBtn">取消</span>
<span class="delBtn">删除</span>
</div>
</div>
</div>
<div class="shopCarFooter">
<div class="checkBoxContainer shopCarCheckBox">
<em class="all_commodity_em"></em>
<span class="quanxuan">全選</span>
</div>
<div class="settlementBox">
<div class="totalPriceBox">
<div class="total">
<span class="totalTitle">總計</span>
<div class="allPrice">
<span class="renminbi">¥</span>
<span class="totalPrice">0</span>
</div>
</div>
<p class="freeOfFreight">已免運費</p>
</div>
<a href="javascript:void(0)" class="settlement">
<span>結算</span>
<span>(</span>
<span class="settlementNumber">0</span>
<span>)</span>
</a>
</div>
</div>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/shopCar.js"></script>
</body>
</html>
css
.shopCarHeader{
width:100%;
height:.85rem;
padding:0 .28rem;
display: flex;
align-items: center;
justify-content: space-between;
color:#fff;
background-color: black;
}
.shopCarHeader:after{
content:'';
width:.23rem;
border:.01rem solid transparent;
}
.shopCarHeader a{
color:#fff;
}
.shopCarMain{
width:100%;
height:calc(100% - 1.9rem);
background-color: rgb(250,250,250);
overflow-x: hidden;
overflow-y: auto;
padding-top:.55rem;
}
.commodity{
display: flex;
align-items: center;
margin-bottom:.55rem;
}
.commodityImg{
width:1.45rem;
height:1.45rem;
margin-left:.22rem;
}
.commodityInfomation{
height:1.45rem;
margin-left:.22rem;
flex:1;
margin-right:.25rem;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.delBox{
display: flex;
align-items: center;
justify-content: space-between;
}
.commodityTitle{
width:4rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.buyNumber{
display: flex;
align-items: center;
justify-content: space-between;
}
.counter .iconfont{
color:rgb(216,216,216);
}
.oldPrice{
text-decoration:line-through;
color:rgb(190,190,190);
margin-left:.1rem;
}
.newPrice{
color:rgb(66,96,201);
}
.delDialog{
position: fixed;
left:0;
top:0;
right:0;
bottom:0;
background-color: rgba(0,0,0,.5);
display: none;
}
.delDialogContent{
position: absolute;
left:50%;
top:50%;
transform: translate(-50%,-50%);
width:70%;
height:2rem;
background-color: #fff;
border-radius:.3rem;
display: flex;
flex-direction: column;
align-items: center;
}
.delDialogTitle{
width:100%;
height:1.3rem;
display: flex;
align-items: center;
justify-content: center;
}
.delDialogBtn{
width:100%;
flex:1;
display: flex;
align-items: center;
justify-content: center;
}
.delDialogBtn span{
width:50%;
height:100%;
display: flex;
align-items: center;
justify-content: center;
}
.delBtn{
color:rgb(255,80,0);
}
.shopCarFooter{
width:100%;
height:1.05rem;
border-top:.01rem solid rgb(242,242,242);
display: flex;
align-items: center;
justify-content: space-between;
}
.settlementBox{
height:100%;
display: flex;
align-items: center;
}
.totalPriceBox{
display: flex;
flex-direction: column;
align-items: flex-end;
}
.total{
display: flex;
align-items: center;
}
.settlement{
width:2.3rem;
height:100%;
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(74,128,250);
color:#fff;
font-size:.3rem;
margin-left:.15rem;
}
.allPrice{
margin-left:.15rem;
}
.renminbi,.totalPrice{
font-size:.28rem;
color:rgb(32,78,184);
}
.freeOfFreight{
color:rgb(146,146,146);
}
.checkBoxContainer.commoditycheckBox{
width: .35rem;
height: .35rem;
margin-left:.2rem;
}
.commodity_em{
width: .35rem;
height: .35rem;
border-radius: 50%;
border: 1px solid rgb(3, 115, 241);
display: inline-block;
}
.commodity_em.commodity_bg{
background: url(../img/duihai.png) no-repeat 0 0;
background-size: .35rem;
border: 0;
display: inline-block;
}
.all_commodity_em{
width: .35rem;
height: .35rem;
border-radius: 50%;
border: 1px solid rgb(3, 115, 241);
display: inline-block;
}
.all_commodity_bg{
background: url(../img/duihai.png) no-repeat 0 0;
background-size: .35rem;
border: 0;
display: inline-block;
}
.checkBoxContainer.shopCarCheckBox{
display: flex;
align-items: center;
margin-left:.2rem;
}
.quanxuan{
display: inline-block;
margin-left:.1rem;
}
