一、 实现购物车模块js案例
1、购物车模块HTML布局
<body>
<div class="wrap w">
<div class="location">当前位置， 首页<span class="ch c1">></span><b class="f10">购物车</b></div>
<table width=100% border="0" cellspacing="0" cellpadding="0" class="carttable">
<tr class="title">
<td width="50px"><input type="checkbox" class="chooes" value=""></td>
<td width="100" class="tal"><span style="margin-left: -15px;">全选</span></td>
<td width="400" class="tal">商品信息</td>
<td width="150">单价（元）</td>
<td width="150" style="text-align: center;">数量 </td>
<td width="150">金额</td>
<td width="80">操作</td>
</tr>
<tr class="cont">
<td><input type="checkbox" class="chooes" value=""></td>
<td class="tal">
<a href="#" class="pic"><img src="C:\code.html\JS-Web-APIs\imeages\upload-icon.png" alt=""></a>
</td>
<td class="tal he">
<a href="#">凌美lamy Safar钢笔/半铅笔T52品黑色水</a>
</td>
<td><del>199.00</del><br>
<b class="unit" style="font-weight: 400;">159.00</b>
</td>
<td>
<div class="amout">
<a href="#" class="increase">+</a>
<input type="text" value="1" class="unum">
<a href="#" class="reduce">-</a>
</div>
</td>
<td><b class="price" style="font-weight: 400;">199.00</b></td>
<td>
<a href="#" class="btn">x</a>
</td>
</tr>
<tr class="cont">
<td><input type="checkbox" class="chooes" value=""></td>
<td class="tal">
<a href="#" class="pic"><img src="C:\code.html\JS-Web-APIs\imeages\upload-3.png" alt=""></a>
</td>
<td class="tal he">
<a href="#">凌美lamy Safar钢笔/半铅笔T52品黑色水</a>
</td>
<td><del>158.00</del><br>
<b class="unit" style="font-weight: 400;">129.00</b>
</td>
<td>
<div class="amout">
<a href="#" class="increase">+</a>
<input type="text" value="1" class="unum">
<a href="#" class="reduce">-</a>
</div>
</td>
<td><b class="price" style="font-weight: 400;">129.00</b></td>
<td>
<a href="#" class="btn">x</a>
</td>
</tr>
<tr class="cont">
<td><input type="checkbox" class="chooes" value=""></td>
<td class="tal">
<a href="#" class="pic">x</a>
</td>
<td class="tal he">
<a href="#">凌美lamy Safar钢笔/半铅笔T52品黑色水</a>
</td>
<td><del>158.00</del><br>
<b class="unit" style="font-weight: 400;">129.00</b>
</td>
<td>
<div class="amout">
<a href="#" class="increase">+</a>
<input type="text" value="1" class="unum">
<a href="#" class="reduce">-</a>
</div>
</td>
<td><b class="price" style="font-weight: 400;">199.00</b></td>
<td>
<a href="#" class="btn">x</a>
</td>
</tr>
<tr class="cont">
<td><input type="checkbox" class="chooes" value=""></td>
<td class="tal">
<a href="#" class="pic"><img src="C:\code.html\JS-Web-APIs\imeages\upload-3.png" alt=""></a>
</td>
<td class="tal he">
<a href="#">凌美lamy Safar钢笔/半铅笔T52品黑色水</a>
</td>
<td><del>158.00</del><br>
<b class="unit" style="font-weight: 400;">129.00</b>
</td>
<td>
<div class="amout">
<a href="#" class="increase">+</a>
<input type="text" value="1" class="unum">
<a href="#" class="reduce">-</a>
</div>
</td>
<td><b class="price" style="font-weight: 400;">199.00</b></td>
<td>
<a href="#" class="btn">x</a>
</td>
</tr>
</table>
<div class="count-price">
<div class="box-lt"><input type="checkbox"> <span>全选</span> <span>删除选中商品</span></div>
<div class="box-rt">
<span class="amort">商品总计：￥<b>608.00</b></span><br>
<span class="youhui">活动优惠：-￥<b>0.00</b></span><br>
<span class="wupi">已选商品0件 总价（不含运费、税费）：<b>￥0.00</b></span><br>
<a href="#">结算</a>
</div>
</div>
</div>
</body>
2、CSS样式布局
<style>
* {
margin: 0;
padding: 0;
}
.w {
width: 1080px;
margin: 0 auto;
}
a {
color: #666;
text-decoration: none;
}
.wrap {
border: 1px solid #ccc;
}
.wrap .location {
height: 40px;
line-height: 40px;
border-bottom: 1px solid #ccc;
}
.wrap .location .f10 {
color: #ff6700;
padding-left: 10px;
}
.wrap .title {
height: 40px;
background-color: #ccc;
}
.wrap tr .chooes {
margin-left: 15px;
}
.wrap .cont {
height: 80px;
font-size: 12px;
}
.wrap .cont .amout {
width: 120px;
height: 30px;
line-height: 30px;
text-align: center;
border: 1px solid #333;
}
.wrap .cont .amout .increase {
float: left;
width: 30px;
height: 30px;
}
.wrap .cont .amout.reduce {
float: left;
width: 30px;
height: 30px;
}
.wrap .cont .amout .unum {
float: left;
width: 60px;
height: 30px;
border: 0;
outline: none;
text-align: center;
border-left: 1px solid #333;
border-right: 1px solid #333;
}
.count-price {
height: 150px;
font-size: 12px;
border-top: 1px solid #ccc;
}
.count-price .box-lt {
float: left;
margin: 15px 0 0 15px;
}
.count-price .box-rt {
float: right;
margin: 15px 15px 0 0;
}
.count-price .box-rt span {
float: right;
}
.count-price .box-rt a {
float: right;
width: 140px;
height: 40px;
line-height: 40px;
margin-top: 10px;
text-align: center;
font-size: 16px;
color: #fff;
background-color: #ff6700;
}
.count-price .box-rt b {
font-weight: normal;
}
.count-price .box-rt.youhui {
margin: 10px 0;
}
.count-price .box-rt .wupi b {
font-size: 20px;
color: #ff6700;
}
</style>
3、JS逻辑布局功能分析及代码实现
3.1、购物车逻辑功能分析
**1、全选功能： 每个商品都会被选中；每行的小计价格会汇总放入总计里面
2、单选功能或取消选中： 被选中行被选中；将购物车内被选中的行的小计价格会汇总放入总计 判断是否被全选中，（全选按钮默认也是选中）
//选中，后者取消选中点击事件
for (var i = 0; i < chooes.length; i++) {
chooes[i].addEventListener('click', function() {
gettotal();
})
}
3、数量的加减功能： 数量的加或减；这行就会被选中 数量加或者减少（最少1） 计算单行的小计价格 将所有被选中的商品，汇总放入总计
var ai = document.querySelectorAll(’.increase’);
var ar = document.querySelectorAll(’.reduce’);
var unmu = document.querySelectorAll(’.unum’);
var zj = document.querySelector(’.zj’);
//数量增加
for (var i = 0; i < ai.length; i++) {
ai[i].addEventListener(‘click’, function() {
numchange(this, ‘ai’);
})
}
//数量减少
for (var i = 0; i < ar.length; i++) {
ar[i].addEventListener(‘click’, function() {
numchange(this, ‘ar’);
})
}
//输入框
for (var i = 0; i < unmu.length; i++) {
unmu[i].addEventListener(‘blur’, function() {
if (this.value < 1) { //数量不能少于1
this.value = 1;
}
this.value = parseInt(this.value); //取整
numchange(this, ‘cur’)
})
}
//函数的封装
//1、数量增加或者减少
//2、对this当前的dom节点操作
function numchange(dom, act) {
var amout = dom.parentNode
var unm = amout.querySelector('.unum');
var num = unm.value;
if (act == "ai") {
num++;
unm.value = num;
} else if (act == "ar") {
if (num < 1) {
num = 1;
} else {
num--;
}
unm.value = num;
} else if (act = "cur") {
} else {
return;
}
var tr = amout.parentNode.parentNode;
var price = tr.querySelector('.price');
var unit = tr.querySelector('.unit');
var danjia = unit.innerHTML;
var sumprice = num * danjia;
sumprice = sumprice.toFixed(2); //保留2位小数
price.innerHTML = sumprice;
var chos = tr.querySelector('.chooes');
chos.checked = true;
}
4、删除按钮 这行会被删除 重新计算总价放入总计
5、删除被选中的商品 购物车总计价格为0**
6、封装总计价格函数
//封装函数计算总合计价格
function gettotal() {
//找到每一行遍历每一行在找到单选框
var total = 0;
for (var i = 0; i < cont.length; i++) {
var chooes = cont[i].querySelector(’.chooes’);
console.log(chooes);
if (chooes.checked) {
var prices = cont[i].querySelector(’.price’).innerHTML;
console.log(prices);
prices = Number(prices);
total = total + prices;
}
}
var total = total.toFixed(2);
var zj = document.querySelector('.zj').innerHTML = '￥' + total;
//判断所有行是否都被选中
for (var i = 0; i < cont.length; i++) {
if (!chooes.checked) {
choo.checked = false;
} else {
choo.checked = true;
}
}
}
gettotal();
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
