淘宝购物车
今天做了个淘宝购物车的界面；界面如下：
代码如下：
HTML部分：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title></title>
<style>
*{ margin:0; padding:0}
body{ font:12px "Microsoft YaHei";}
ul{ list-style:none;}
a{ text-decoration:none;}
.data-table{ width:990px; margin:50px auto;}
.data-table input[type=checkbox]{ position:relative; top:2px; right:5px;}
.t-hd{ border-top:2px solid #e6e6e6; overflow:hidden; padding:20px 15px;}
.hd-check{ width:120px;}
.hd-commodityInfo{ width:400px;}
.hd-unitPrice{ width:120px;}
.hd-number{ width:90px;}
.hd-amount{ width:140px;}
.hd-operate{ width:80px;}
.t-hd>div,
.t-bd ul li>div,
.t-ft>div,
.bd-commodityInfo>div{ float:left;}
.t-bd{}
.t-bd ul li{ border:1px solid #e7e7e7; background-color:#fcfcfc; margin-bottom:15px; padding:15px; overflow:hidden;}
.t-bd ul li.selected{background-color:#fff8e1;}
.bd-check{ width:30px; margin-left:15px;}
.bd-commodityInfo{ width:440px; height:80px;}
.bd-commodityInfo .info-pic{ width:80px; height:80px; margin-right:10px;}
.bd-commodityInfo .info-text{ width:190px; line-height:22px;}
.bd-commodityInfo .info-text a{ color:#333;}
.bd-commodityInfo .info-parameter{ width:130px; color:#999; margin-left:30px;}
.bd-commodityInfo .info-parameter span{ display:block;}
.bd-unitPrice{ width:100px; margin-left:30px;}
.bd-unitPrice del,
.bd-unitPrice b{ display:block;}
.bd-unitPrice del{ color:#999;}
.bd-number{ width:100px;}
.bd-number a{ float:left; width:16px; height:22px; line-height:22px;
background-color:#f0f0f0; border:1px solid #e5e5e5; text-align:center;}
.bd-number input[type=text]{ float:left; width:40px; height:16px; padding:2px 5px;}
.bd-amount{ width:120px; margin-left:20px;}
.bd-amount b,.ft-selectedGoods b,.t-ft .ft-totalPrice b{ color:#f40;}
.bd-operate{ width:80px; margin-left:15px;}
.bd-operate a{ color:#333;}
.bd-commodityInfo .info-text a:hover,
.bd-operate a:hover,
.ft-del a:hover{ color:#f40;}
.t-ft{ height:50px; line-height:50px; background-color:#e5e5e5; position:relative;}
.ft-check{ margin-left:15px;}
.ft-del{ padding:0 40px;}
.ft-del a{ color:#333;}
.ft-selectedGoods{ margin-left:350px;}
.ft-selectedGoods b{ padding:0 3px;}
.t-ft .ft-totalPrice{ float:right; line-height:50px; overflow:hidden;}
.t-ft .ft-totalPrice span{}
.t-ft .ft-totalPrice b{ font-size:20px; padding-right:20px;}
.t-ft .ft-totalPrice a{ float:right; width:120px; height:50px;
text-align:center; color:#aaa; font-size:22px; border-radius:3px;
cursor:not-allowed;}
.t-ft .ft-totalPrice a.disable{ background-color:#f22d00; color:#fff;}
.t-ft .ft-totalPrice a.disable:hover{ background-color:#f40;}
.checkShowPic{ width:988px; background-color:#fff; border:1px solid #aaa; position:absolute; left:0; bottom:100%;}
.checkShowPic li{ float:left; margin:10px; position:relative;}
.checkShowPic li span{ position:absolute; right:0; top:0;
background-color:#000; color:#fff; height:20px; line-height:20px;
padding:0 8px; cursor:pointer;}
</style>
</head>
<body>
<div class="data-table">
<div class="t-hd">
<div class="hd-check">
<label><input type="checkbox" class="checkAll" />全选</label>
</div>
<div class="hd-commodityInfo">商品信息</div>
<div class="hd-unitPrice">单价（元）</div>
<div class="hd-number">数量</div>
<div class="hd-amount">金额（元）</div>
<div class="hd-operate">操作</div>
</div>
<div class="t-bd">
<ul>
<li>
<div class="bd-check">
<label><input type="checkbox" class="checkboxItem" /></label>
</div>
<div class="bd-commodityInfo">
<div class="info-pic">
<img src="images/80x80_1.jpg"/>
</div>
<div class="info-text">
<a href="#">斯雅娇2015新款夏装韩版女装纯棉短袖t恤女夏蕾丝袖修身大码体恤</a>
</div>
<div class="info-parameter">
<span>主要颜色：果粉色</span>
<span>尺码：XL</span>
</div>
</div>
<div class="bd-unitPrice">
<del>189.00</del>
<b>69.00</b>
</div>
<div class="bd-number">
<a href="javascript:;" class="minus">-</a>
<input type="text" class="inputNum" value="1"/>
<a href="javascript:;" class="plus">+</a>
</div>
<div class="bd-amount">
<b>69.00</b>
</div>
<div class="bd-operate">
<a href="javascript:;">删除</a>
</div>
</li>
<li>
<div class="bd-check">
<label><input type="checkbox" class="checkboxItem" /></label>
</div>
<div class="bd-commodityInfo">
<div class="info-pic">
<img src="images/80x80_2.jpg"/>
</div>
<div class="info-text">
<a href="#">2015新款韩范连衣裙百褶春夏装小清水墨玫瑰花荷叶摆连衣裙森林</a>
</div>
<div class="info-parameter">
<span>颜色分类：图片色</span>
<span>尺码：L</span>
</div>
</div>
<div class="bd-unitPrice">
<del>398.00</del>
<b>96.00</b>
</div>
<div class="bd-number">
<a href="javascript:;" class="minus">-</a>
<input type="text" class="inputNum" value="1"/>
<a href="javascript:;" class="plus">+</a>
</div>
<div class="bd-amount">
<b>96.00</b>
</div>
<div class="bd-operate">
<a href="javascript:;">删除</a>
</div>
</li>
</ul>
</div>
<div class="t-ft">
<ul class="checkShowPic">
<!--<li><a href="javascript:;"><img
src="images/80x80_1.jpg"/></a><span>取消选择</span><
/li>-->
</ul>
<div class="ft-check">
<label><input type="checkbox" class="checkAll"/>全选</label>
</div>
<div class="ft-del"><a href="javascript:;">删除</a></div>
<div class="ft-selectedGoods">
<span>已选商品<b>0</b>件</span>
</div>
<div class="ft-totalPrice">
<span>合计（不含运费）：</span><b>￥0.00</b>
<a href="javascript:;">结算</a>
</div>
</div>
</div>
</body>
<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script>
(function(){
var cart={
init:function(){
this.getDom();
this.bindEvent();
this.b=false;
this.bInput=false;
this.isCheck=false;
},
getDom:function(){
this.dataTable=$('.data-table');
this.checkBox=this.dataTable.find('input[type=checkbox]');
this.tBody=this.dataTable.find('.t-bd');
this.tBodyItem=this.tBody.find('li');
this.minusBtn=this.tBodyItem.find('.minus');
this.plusBtn=this.tBodyItem.find('.plus');
this.checkboxItem=this.tBodyItem.find('.checkboxItem');
this.tFoot=this.dataTable.find('.t-ft');
this.totalPrice=this.tFoot.find('.ft-totalPrice');
this.selectedGoods=this.tFoot.find('.ft-selectedGoods');
},
bindEvent:function(){
var self=this;
this.dataTable.on('click',function(e){
//全选事件
if($(e.target).hasClass('checkAll')){
self.checkAll();
self.isCheck=!self.isCheck;
self.totalPrice.find('b').html('￥'+self.getTotalPrice());
self.selectedGoods.find('b').html(self.isCheckNum());
self.showPic();
}
//选择商品事件
if($(e.target).hasClass('checkboxItem')){
self.totalPrice.find('b').html('￥'+self.getTotalPrice());
self.selectedGoods.find('b').html(self.isCheckNum());
self.showPic();
}
//数量加事件
if($(e.target).hasClass('plus')){
self.bInput=true;
self.b=true;
var obj=$(e.target).parents('li');
self.getItemPrice(obj);
self.totalPrice.find('b').html('￥'+self.getTotalPrice());
}
//数量减事件
if($(e.target).hasClass('minus')){
self.bInput=true;
self.b=false;
var obj=$(e.target).parents('li');
self.getItemPrice(obj);
self.totalPrice.find('b').html('￥'+self.getTotalPrice());
}
}).on('keyup',function(e){
//获取数量总数
self.bInput=false;
if($(e.target).hasClass('inputNum')){
var obj=$(e.target).parents('li');
self.getItemPrice(obj);
self.totalPrice.find('b').html('￥'+self.getTotalPrice());
}
});
},
checkAll:function(){//全选
for(var i=0;i<this.checkBox.length;i++){
if(!this.isCheck){
this.checkBox.eq(i).attr('checked',true);
}else{
this.checkBox.eq(i).removeAttr('checked');
}
}
},
getTotalPrice:function(){//总价格
var total=0;
for(var i=0;i<this.checkboxItem.length;i++){
if(this.checkboxItem.eq(i).is(':checked')){
var price=this.checkboxItem.eq(i).parents('.bd-check').siblings('.bd-amount').find('b').html();
total+=parseFloat(price);
}
}
return total.toFixed(2);
},
getItemPrice:function(obj){//商品单价计算
var price=obj.find('.bd-unitPrice b').html();
var num=parseInt(obj.find('.bd-number input[type=text]').val());
if(this.bInput){
if(this.b){
num++;
}else{
num--;
if(num<1){
num=1;
}
}
}else{
if(num<1){
num=1;
}
}
obj.find('.bd-number input[type=text]').val(num);
obj.find('.bd-amount b').html((price*num).toFixed(2));
},
isCheckNum:function(){//获取已选商品个数
var isCheckNum=0;
for(var i=0;i<this.checkboxItem.length;i++){
if(this.checkboxItem.eq(i).is(':checked')){
isCheckNum++;
this.totalPrice.find('a').addClass('disable');
this.checkboxItem.eq(i).parents('li').addClass('selected');
}else{
this.isCheck=false;
this.dataTable.find('.checkAll').removeAttr('checked');
this.checkboxItem.eq(i).parents('li').removeClass('selected');
if(isCheckNum==0){
this.totalPrice.find('a').removeClass('disable');
}
}
}
return isCheckNum;
}
/*,
showPic:function(){
$('.checkShowPic').html("");
for(var i=0;i<this.tBodyItem.length;i++){
var $item=this.tBodyItem.eq(i);
if($item.hasClass('selected')){
var _src=$item.find('.info-pic img').attr('src');
$('.checkShowPic').append('<li><a href="javascript:;"><img src="'+_src+'"/></a><span>取消选择</span></li>');
}
}
}*/
}
cart.init();
})();
</script>
</html>
