(一)加入购物车
html代码部分:
<section class="cart_fixed">
<section class="cart_left">
<span><a href="shopping_cart.html" class="cart_icon"><i style="display:none;">0</i></a><section class="sucess_cart" style="display:none;"><p>已成功加入购物车</p><a href="shopping_cart.html">去结算</a><em></em></section></span>
<!-- <span><a href="" class="service_icon"></a></span> -->
<span><a href="javascript:void(0);" class="favo_icon"></a></span>
</section>
<a href="javascript:void(0);" οnclick="add_car();">加入购物车</a>
</section>
<!--/底部-->
<!--弹窗-->
<section class="load_cart" style="display:none;"><img src="images/load.gif" width="35" height="35" alt="">加入购物车...</section>
js代码部分:
function add_car(){
$(".load_cart").show();
$(".cart_left").siblings().remove();
$(".cart_fixed").append('<a href="javascript:void(0);">加入购物车</a>');
window.setTimeout(hello,2000);
}
function hello(){
var num = $(".cart_icon i").html();//获取购物车中的商品数量
var number = parseInt(num) + 1;
if(number>5){
$(".load_cart").html("抱歉,库存不足!");
$(".cart_left").siblings().remove();
$(".cart_fixed").append('<a href="javascript:void(0);" οnclick="add_car();">加入购物车</a>');
return false;
<span style="white-space:pre"> </span>}
$(".load_cart").hide();
$(".cart_icon i").html(number);
$(".cart_icon i,.sucess_cart").show();
$(".cart_left").siblings().remove();
$(".cart_fixed").append('<a href="javascript:void(0);" οnclick="add_car();">加入购物车</a>');
window.setTimeout(guanbi,2000);
}
function guanbi(){
$(".sucess_cart").hide();
}
$(".load_cart").click(function(){
$(".load_cart").html('<img src="images/load.gif" width="35" height="35" alt="">加入购物车...');
$(".load_cart").hide();
});
(二)购物车加减
html代码部分:
<section class="cart_list">
<ul>
<li class="goods1">
<span class="choose"><i></i></span>
<dl>
<dt><a href=""><img src="img/pic.png" alt=""></a></dt>
<dd>
<a href="" class="tit">Natural Sins水果干3种口味Natural Sins</a>
<p>
<a href="javascript:void(0);" class="delete" οnclick="showDialogConfirm('确认要删除该商品吗?','goods1')"></a>
<strong class="price">?<font>16.80</font></strong>
<span class="add_btn"><label class="min">-</label><input type="text" value="1" class="num" readonly="readonly"><label class="add">+</label></span>
</p>
</dd>
</dl>
</li>
<li class="goods2">
<span class="choose"><i></i></span>
<dl>
<dt><a href=""><img src="img/pic.png" alt=""></a></dt>
<dd>
<a href="" class="tit">Natural Sins水果干3种口味Natural Sins</a>
<p>
<a href="javascript:void(0);" class="delete" οnclick="showDialogConfirm('确认要删除该商品吗?','goods2')"></a>
<strong class="price">?<font>120.00</font></strong>
<span class="add_btn"><label class="min">-</label><input type="text" value="1" class="num" readonly="readonly"><label class="add">+</label></span>
</p>
</dd>
</dl>
</li>
<li class="goods3">
<span class="choose"><i></i></span>
<dl>
<dt><a href=""><img src="img/pic.png" alt=""></a></dt>
<dd>
<a href="" class="tit">Natural Sins水果干3种口味Natural Sins</a>
<p>
<a href="javascript:void(0);" class="delete" οnclick="showDialogConfirm('确认要删除该商品吗?','goods3')"></a>
<strong class="price">?<font>18.50</font></strong>
<span class="add_btn"><label class="min">-</label><input type="text" value="1" class="num" readonly="readonly"><label class="add">+</label></span>
</p>
</dd>
</dl>
</li>
<li class="goods4">
<span class="choose"><i></i></span>
<dl>
<dt><a href=""><img src="img/pic.png" alt=""></a></dt>
<dd>
<a href="" class="tit">Natural Sins水果干3种口味Natural Sins</a>
<p>
<a href="javascript:void(0);" class="delete" οnclick="showDialogConfirm('确认要删除该商品吗?','goods4')"></a>
<strong class="price">?<font>198.00</font></strong>
<span class="add_btn"><label class="min">-</label><input type="text" value="1" class="num" readonly="readonly"><label class="add">+</label></span>
</p>
</dd>
</dl>
</li>
<li class="goods5">
<span class="choose"><i></i></span>
<dl>
<dt><a href=""><img src="img/pic.png" alt=""></a></dt>
<dd>
<a href="" class="tit">Natural Sins水果干3种口味Natural Sins</a>
<p>
<a href="javascript:void(0);" class="delete" οnclick="showDialogConfirm('确认要删除该商品吗?','goods5')"></a>
<strong class="price">?<font>18.00</font></strong>
<span class="add_btn"><label class="min">-</label><input type="text" value="1" class="num" readonly="readonly"><label class="add">+</label></span>
</p>
</dd>
</dl>
</li>
</ul>
</section>
<!--/主体部分-->
<!--底部-->
<section class="quanx_fixed">
<section class="quanx_left">
<label><i></i>全选</label>
<span>总计<em id="total">¥37.00</em></span>
</section>
<a href="javascript:;" class="setMoney">立即结算(<em>0</em>)</a>
</section>
<!--/底部-->
js代码部分:
$(function(){
<span style="white-space:pre"> </span>//数量加法
<span style="white-space:pre"> </span>$(".add").click(function(){
var t=$(this).siblings('input');
t.val(parseInt(t.val())+1);
if($(".cart_list ul li .choose").hasClass('cur')){
totalNum(); //统计总的数量
totalMoney();//统计总价格
}
})
//数量减法
$(".min").click(function(){
var t=$(this).siblings('input');
t.val(parseInt(t.val())-1)
if(parseInt(t.val())<1){
t.val(1);
}
if($(".cart_list ul li .choose").hasClass('cur')){
totalNum(); //统计总的数量
totalMoney();//统计总价格
}
})
//判断是否全选
chkAll();
})
//全选按钮
$(".quanx_left label").click(function(){
$(this).toggleClass('cur');
if($(".quanx_left label").hasClass('cur')){
$(".cart_list ul li span").addClass('cur');
totalNum();//统计数量
totalMoney();//统计总价格
$("#total").parent().show();
}else{
$(".cart_list ul li span").removeClass('cur');
var num = $(".cart_list ul li span.cur i").size();
if(num==0){
$("#total").parent().hide();
}else{
$("#total").parent().show();
}
$(".setMoney").empty().html("立即结算(<em>"+num+"</em>)");
totalMoney();//统计总价格
}
});
//点击单个商品
$(".cart_list ul li .choose").click(function(){
if(!$(this).hasClass('cur')){
$(this).toggleClass('cur');
chkAll();//全选
totalNum(); //统计总的数量
totalMoney();//统计总价格
}else{
$(this).toggleClass('cur');
chkAll();//全选
totalNum(); //统计总的数量
totalMoney();//统计总价格
}
});
//判断是否全选
function chkAll(){
var _li = $(".cart_list ul li span i").size();
var _liCur = $(".cart_list ul li span.cur i").size();
if(_liCur==_li){
$(".quanx_left label").addClass('cur');
}else{
$(".quanx_left label").removeClass('cur');
}
if(_liCur==0){
$("#total").parent().hide();
}else{
$("#total").parent().show();
}
}
//统计商品数量
function totalNum(){
var num=0;
$('.cart_list ul li .choose').each(function(){
if ($(this).hasClass('cur')) {
var number = parseInt($(this).parent().find('input').val());
number = isNaN(number) ? 1 : Math.abs(number);
num += number;
};
});
$(".setMoney").empty().html("立即结算(<em>"+num+"</em>)");
}
//统计总价格
function totalMoney(){
var totalMoney=0;
$('.cart_list ul li .choose').each(function(){
if ($(this).hasClass('cur')) {
var number = parseInt($(this).parent().find('input').val());
var money = $(this).parent().find('font').html();
money = money*number;
money = isNaN(money) ? 1 : Math.abs(money);
totalMoney += money;
};
});
$("#total").empty().html(totalMoney.toFixed(2));
}
//删除指定的单品
function showDialogConfirm(msg,cont){
var str = '<div class="cengbox"></div><section class="popup"><p>'+msg+'</p><a href="javascript:void(0)" class="cel">取消</a><a href="javascript:void(0)" class="cur ok">确定</a></section>';
$('body').append(str);
$('body a.ok').on("click",function(){
$('body .'+cont+'').detach();
$(".cengbox,.popup").detach();
totalNum();
totalMoney();
chkAll();
var num = $(".cart_list ul li span.cur i").size();
if(num==0){
$("#total").parent().hide();
$(".quanx_left label").removeClass();
}else{
$("#total").parent().show();
}
})
$('body a.cel').on("click",function(){
$(".cengbox,.popup").detach();
})
return false;
}
//点击立即结算
$(".setMoney").click(function(){
var num = $(".cart_list ul li span.cur i").size();
if(num==0){
msg('请选择您要购买的商品!');
}else{
msg('恭喜,购买商品成功!');
}
});
//弹出提示框
function msg(msg){
var str = '<div class="cengbox"></div><section class="popup"><p>'+msg+'</p><a href="javascript:void(0)" class="cel">取消</a><a href="javascript:void(0)" class="cur ok">确定</a></section>';
$('body').append(str);
$('body a.ok,a.cel').on("click",function(){
$(".cengbox,.popup").detach();
})
return false;
}