js简单购物车实现方法
这个是之前写的项目HTML css 和js 写的
点击结算后
HTML代码
<div class="shenti8">
<span style="color: #000000; font-size: 15px;">您以选购以下商品</span>
</div>
<div class="shenti9">
<div class="deltree">
<div id="shenti1">
<div id="shenti2"><span style="color: #000000; font-size:12.5px ;">商品名</span></div>
<div id="shenti3"><span style="color: #000000; font-size:12.5px ;">单品积分</span></div>
<div id="shenti4"><span style="color: #000000; font-size:12.5px ;">市场价</span></div>
<div id="shenti5"><span style="color: #000000; font-size:12.5px ;">蔚蓝价</span></div>
<div id="shenti6"><span style="color: #000000; font-size:12.5px ;">数量</span></div>
<div id="shenti7"><span style="color: #000000; font-size:12.5px ;">删除</span></div>
</div>
<div id="shenti8">
<div id="shenti9"><span style="color: blue; font-size: 12.5px;">私募(首部披露资本博弈秘密的金融...)</span></div>
<div id="shenti10"><span class="deltree_class" style="color: #000000; font-size: 12.5px;">189</span></div>
<div id="shenti11"><span style="color: #000000; font-size: 12.5px;">￥<span class="price_">170.00</span></span>
</div>
<div id="shenti12"><span style="color: #000000; font-size: 12.5px;">￥<span class="wlprice_">150.00</span>(59折)</span>
</div>
<div id="shenti13"><input type="text" class="num_" size="1" value="1" style="text-align: center;" /></div>
<div id="shenti14">
<a href="#"><span class="drop_" style="color: blue; font-size: 13px;">删除</span></a>
</div>
</div>
<div id="shenti15">
<div id="shenti16"><span style="color: blue; font-size: 12.5px;">小团圆(张爱玲最神秘小说遗稿)</span></div>
<div id="shenti17"><span class="deltree_class" style="color: #000000; font-size: 12.5px;">173</span></div>
<div id="shenti18"><span style="color: #000000; font-size: 12.5px;">￥<span class="price_">188.00</span></span>
</div>
<div id="shenti19"><span style="color: #000000; font-size: 12.5px;">￥<span class="wlprice_">168.00</span>(62折)</span>
</div>
<div id="shenti20"><input type="text" class="num_" size="1" value="1" style="text-align: center;" /></div>
<div id="shenti21">
<a href="#"><span class="drop_" style="color: blue; font-size: 13px;">删除</span></a>
</div>
</div>
<div id="shenti22">
<div id="shenti23"><span style="color: blue; font-size: 12.5px;">不抱怨的世界(畅销全球80国的世界...)</span></div>
<div id="shenti24"><span class="deltree_class" style="color: #000000; font-size: 12.5px;">154</span></div>
<div id="shenti25"><span style="color: #000000; font-size: 12.5px;">￥<span class="price_">168.00</span></span>
</div>
<div id="shenti26"><span style="color: #000000; font-size: 12.5px;">￥<span class="wlprice_">88.00</span>(62折)</span>
</div>
<div id="shenti27"><input type="text" class="num_" size="1" value="2" style="text-align: center;" /></div>
<div id="shenti28">
<a href="#"><span class="drop_" style="color: blue; font-size: 13px;">删除</span></a>
</div>
</div>
<div id="shenti29">
<div id="shenti30"><span style="color: blue; font-size: 12.5px;">福玛特双桶洗衣粉XPB20-07S</span></div>
<div id="shenti31"><span class="deltree_class" style="color: #000000; font-size: 12.5px;">358</span></div>
<div id="shenti32"><span style="color: #000000; font-size: 12.5px;">￥<span class="price_">158.00</span></span>
</div>
<div id="shenti33"><span style="color: #000000; font-size: 12.5px;">￥<span class="wlprice_">78.00</span>(78折)</span>
</div>
<div id="shenti34"><input type="text" class="num_" size="1" value="1" style="text-align: center;" /></div>
<div id="shenti35">
<a href="#"><span class="drop_" style="color: blue; font-size: 13px;">删除</span></a>
</div>
</div>
<div id="shenti36">
<div id="shenti37"><span style="color: blue; font-size: 12.5px;">PHP和MySQL web开发(原书第4版)</span></div>
<div id="shenti38"><span class="deltree_class" style="color: #000000; font-size: 12.5px;">712</span></div>
<div id="shenti39"><span style="color: #000000; font-size: 12.5px;">￥<span class="price_">179.00</span></span>
</div>
<div id="shenti40"><span style="color: #000000; font-size: 12.5px;">￥<span class="wlprice_">68.00</span>(75折)</span>
</div>
<div id="shenti41"><input type="text" class="num_" size="1" value="1" style="text-align: center;" /></div>
<div id="shenti42">
<a href="#"><span class="drop_" style="color: blue; font-size: 13px;">删除</span></a>
</div>
</div>
<div id="shenti43">
<div id="shenti44"><span style="color: blue; font-size: 12.5px;">法布尔昆虫记(再买￥68.30即可参加“满199元减10元现金”活动)</span></div>
<div id="shenti45"><span class="deltree_class" style="color: #000000; font-size: 12.5px;">10</span></div>
<div id="shenti46"><span style="color: #000000; font-size: 12.5px;">￥<span class="price_">198.00</span> </span>
</div>
<div id="shenti47"><span style="color: #000000; font-size: 12.5px;">￥<span class="wlprice_">170.00</span>(66折)</span>
</div>
<div id="shenti48"><input type="text" class="num_" size="1" value="1" style="text-align: center;" /></div>
<div id="shenti49">
<a href="#"><span class="drop_" style="color: blue; font-size: 13px;">删除</span></a>
</div>
</div>
</div>
<div id="shenti50">
<div id="shenti51">
<a href="#"><span id="empty_" style="color: blue; font-size: 13px;">清空购物车</span></a>
</div>
<div id="shenti52"><span>您共节省金额:<span id="save_">
</span> <br/>可获得商品积分:<span id="integral_">
</span> </span>
</div>
<span class="zongji">
<h3><b>商品金额总计:</b></h3><span id="total_">
</span>
</span>
<div id="shenti53">
<input type="submit" value="" id="submit_" />
</div>
</div>
</div>css代码
.shenti8 {
margin-left: 550px;
margin-top: 20px;
}
.shenti9 {
width: 1000px;
/*height: 370px;*/
border: 1px solid black;
margin-left: 200px;
}
#shenti1 {
width: 1000px;
height: 25px;
background-color: #87CEFA;
}
#shenti2 {
margin-left: 20px;
}
#shenti3 {
margin-left: 510px;
margin-top: -20px;
}
#shenti4 {
margin-left: 645px;
margin-top: -20px;
}
#shenti5 {
margin-left: 770px;
margin-top: -20px;
}
#shenti6 {
margin-left: 875px;
margin-top: -20px;
}
#shenti7 {
margin-left: 955px;
margin-top: -20px;
}
#shenti8 {
width: 1000px;
height: 40px;
background-color: white;
}
#shenti9 {
width: 420px;
}
#shenti9 span {
margin-left: 10px;
}
#shenti10 {
width: 50px;
margin-left: 523px;
margin-top: -15px;
}
#shenti11 {
width: 50px;
margin-left: 640px;
margin-top: -21px;
}
#shenti12 {
width: 100px;
margin-left: 746px;
margin-top: -21px;
}
#shenti13 {
width: 50px;
margin-left: 868px;
margin-top: -21px;
}
#shenti14 {
width: 50px;
margin-left: 955px;
margin-top: -21px;
}
#shenti15 {
width: 1000px;
height: 40px;
background-color: peachpuff;
}
#shenti16 {
width: 420px;
}
#shenti16 span {
margin-left: 10px;
}
#shenti17 {
width: 50px;
margin-left: 523px;
margin-top: -15px;
}
#shenti18 {
width: 50px;
margin-left: 640px;
margin-top: -21px;
}
#shenti19 {
width: 100px;
margin-left: 746px;
margin-top: -21px;
}
#shenti20 {
width: 50px;
margin-left: 868px;
margin-top: -21px;
}
#shenti21 {
width: 50px;
margin-left: 955px;
margin-top: -21px;
}
#shenti22 {
width: 1000px;
height: 40px;
background-color: white;
}
#shenti23 {
width: 420px;
}
#shenti23 span {
margin-left: 10px;
}
#shenti24 {
width: 50px;
margin-left: 523px;
margin-top: -15px;
}
#shenti25 {
width: 50px;
margin-left: 640px;
margin-top: -21px;
}
#shenti26 {
width: 100px;
margin-left: 746px;
margin-top: -21px;
}
#shenti27 {
width: 50px;
margin-left: 868px;
margin-top: -21px;
}
#shenti28 {
width: 50px;
margin-left: 955px;
margin-top: -21px;
}
#shenti29 {
width: 1000px;
height: 40px;
background-color: peachpuff;
}
#shenti30 {
width: 420px;
}
#shenti30 span {
margin-left: 10px;
}
#shenti31 {
width: 50px;
margin-left: 523px;
margin-top: -15px;
}
#shenti32 {
width: 50px;
margin-left: 640px;
margin-top: -21px;
}
#shenti33 {
width: 100px;
margin-left: 746px;
margin-top: -21px;
}
#shenti34 {
width: 50px;
margin-left: 868px;
margin-top: -21px;
}
#shenti35 {
width: 50px;
margin-left: 955px;
margin-top: -21px;
}
#shenti36 {
width: 1000px;
height: 40px;
background-color: white;
}
#shenti37 {
width: 420px;
}
#shenti37 span {
margin-left: 10px;
}
#shenti38 {
width: 50px;
margin-left: 523px;
margin-top: -15px;
}
#shenti39 {
width: 50px;
margin-left: 640px;
margin-top: -21px;
}
#shenti40 {
width: 100px;
margin-left: 746px;
margin-top: -21px;
}
#shenti41 {
width: 50px;
margin-left: 868px;
margin-top: -21px;
}
#shenti42 {
width: 50px;
margin-left: 955px;
margin-top: -21px;
}
#shenti43 {
width: 1000px;
height: 40px;
background-color: peachpuff;
}
#shenti44 {
width: 420px;
}
#shenti44 span {
margin-left: 10px;
}
#shenti45 {
width: 50px;
margin-left: 523px;
margin-top: -15px;
}
#shenti46 {
width: 50px;
margin-left: 640px;
margin-top: -21px;
}
#shenti47 {
width: 100px;
margin-left: 746px;
margin-top: -21px;
}
#shenti48 {
width: 50px;
margin-left: 868px;
margin-top: -21px;
}
#shenti49 {
width: 50px;
margin-left: 955px;
margin-top: -21px;
}
#shenti50 {
width: 1000px;
height: 106px;
background-color: #87CEFA;
}
#shenti51 {
width: 70px;
margin-left: 20px;
}
#shenti52 {
width: 300px;
height: 100px;
margin-left: 455px;
}
#shenti53 {
margin-left: 820px;
margin-top: -90px;
}js代码
//删除方法cancel();
//结算方法settlement();
var price=[];//商品价格
var wlprice=[];//蔚蓝价格
var num=[];//数量
function settlement(){
}
$(function(){
$("#submit_").click(function(){
//$("#total_").val(null);
var total=0;
var savemoney=0;
var integral=0;
var a=$(".price_").length;//价格长度
for (var i = 0; i < a; i++) {//把价格存入price数组中
price[i]=$(".price_").eq(i).text();
//alert(price[i])
}
var b=$(".wlprice_").length;//把蔚蓝价格存入wlprice数组中
for (var j = 0; j < b; j++) {
wlprice[j]=$(".wlprice_").eq(j).text();
//alert(wlprice[j])
}
var c=$(".num_").length;
for (var q = 0; q < b; q++) {//把数量存入num数组中
num[q]=$(".num_").eq(q).val();
//alert(num[q])
}
//计算价格
for (var w = 0; w < c; w++) {
total=total+wlprice[w]*num[w];//计算价格
savemoney=savemoney+price[w]*num[w];//计算原价格
}
for (var r = 0; r < c; r++) {
var deltree1= $(".deltree_class").eq(r).text();//计算积分
var deltree2=parseInt(deltree1);
integral=integral+deltree2*num[r];
}
//可获得积分
$("#integral_").text(integral);
//省钱
var save1=savemoney-total;
$("#save_").text(save1);
//把值传入标签
$("#total_").text(total);
//alert(total)
})
//删除商品
$(".drop_").click(function(){
$(this).parent().parent().parent().remove();
})
//清空购物车
$("#empty_").click(function(){
$(".deltree").remove();
})
//商品推荐
$(".slide_").click(function(){
$(".slide_div").slideToggle();
})
})