js实现数据版购物车(实现购物车所有功能)
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box {
margin: 0 auto;
width: 700px;
}
.goodsimg {
width: 80px;
height: 80px;
}
.goodsnum {
width: 50px;
text-align: center;
}
.foot {
width: 700px;
margin: 0 auto;
position: relative;
&>span , button{
position: absolute;
}
.del {
left: 0;
top: 10px;
}
.delcart {
left: 150px;
top: 10px;
}
.setnum {
right: 150px;
top: 10px;
}
.goby {
right: 0;
background-color: red;
padding: 10px 20px;
border: 0;
color: white;
}
}
</style>
</head>
<body>
<table class="box">
<thead>
<tr>
<th><input class="allchecked" onclick="setallselect(this)" type="checkbox" name="" id="" />全选</th>
<th>商品</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<th><input class="checked" type="checkbox" name="" id="" /></th>
<th>
<img
class="goodsimg"
src="https://s21.ax1x.com/2024/03/12/pF6I7nS.png"
alt=""
/><br />牛奶
</th>
<th>¥<span>15</span></th>
<th>
<button class="min">-</button
><input class="goodsnum" value="1" type="text" />
<button class="max">+</button>
</th>
<th>¥<span class="all">0</span></th>
<th onclick="deldom(this)">删除</th>
</tr>
<tr>
<th><input class="checked" type="checkbox" name="" id="" /></th>
<th>
<img
class="goodsimg"
src="https://s21.ax1x.com/2024/03/12/pF6I7nS.png"
alt=""
/><br />牛奶
</th>
<th>¥<span>25</span></th>
<th>
<button class="min">-</button
><input class="goodsnum" value="1" type="text" />
<button class="max">+</button>
</th>
<th>¥<span class="all">0</span></th>
<th onclick="deldom(this)">删除</th>
</tr>
<tr>
<th><input class="checked" type="checkbox" name="" id="" /></th>
<th>
<img
class="goodsimg"
src="https://s21.ax1x.com/2024/03/12/pF6I7nS.png"
alt=""
/><br />牛奶
</th>
<th>¥<span>35</span></th>
<th>
<button class="min">-</button
><input class="goodsnum" value="1" type="text" />
<button class="max">+</button>
</th>
<th>¥<span class="all">0</span></th>
<th onclick="deldom(this)">删除</th>
</tr>
<tr>
<th><input class="checked" type="checkbox" name="" id="" /></th>
<th>
<img
class="goodsimg"
src="https://s21.ax1x.com/2024/03/12/pF6I7nS.png"
alt=""
/><br />牛奶
</th>
<th>¥<span>45</span></th>
<th>
<button class="min">-</button
><input class="goodsnum" value="1" type="text" />
<button class="max">+</button>
</th>
<th>¥<span class="all">0</span></th>
<th onclick="deldom(this)">删除</th>
</tr>
<tr>
<th><input class="checked" type="checkbox" name="" id="" /></th>
<th>
<img
class="goodsimg"
src="https://s21.ax1x.com/2024/03/12/pF6I7nS.png"
alt=""
/><br />牛奶
</th>
<th>¥<span>55</span></th>
<th>
<button class="min">-</button
><input class="goodsnum" value="1" type="text" />
<button class="max">+</button>
</th>
<th>¥<span class="all">0</span></th>
<th onclick="deldom(this)">删除</th>
</tr>
</tbody>
</table>
<div class="foot">
<span class="del" onclick="delopengoods()">删除所选商品</span>
<span class="delcart" onclick="clearcart()">清理购物车</span>
<span class="setnum">选择<span class="nums" style="color: red;">4</span>件商品总价<span class="price" style="color: red;">¥70</span></span>
<button class="goby">去结算</button>
</div>
<!-- 1.单行删除元素 -->
<!-- 2.步进器加减操作 -->
<!-- 3.小计 -->
<!-- 单条选中 -->
<!-- 全选中 -->
<!-- 计算总数和总价 -->
<!-- 清理购物车 t0-->
<!-- 删除选中 -->
<script>
// 定义删除元素的方法
function deldom(el){
el.parentNode.remove()
setallnum()
}
// 步进器加法减法的操作
// let mins = document.querySelectorAll('.min')
// let maxs = document.querySelectorAll('.max')
// for(let item of mins){
// item.addEventListener('click',function(){
// let input =this.parentNode.children[1]
// input.value = input.value<=1?1:input.value*1-1
// })
// }
// for(let item of maxs){
// item.addEventListener('click',function(){
// let input =this.parentNode.children[1]
// input.value = input.value*1+1
// })
// }
let buts = document.querySelectorAll('tr th button')
for(let item of buts){
item.addEventListener('click',function(){
// 判断是加还是减
let types = this.innerHTML=='+'?1:-1
let input =this.parentNode.children[1]
input.value = input.value*1+types
input.value<=0?input.value = 1:''
// 设置小计
setsizeallprice()
// 调用选中个数的方法
setallnum()
})
}
// 设置小计
function setsizeallprice(params) {
let sizeall = document.querySelectorAll('.all')
sizeall.forEach(function(item){
let price = item.parentNode.parentNode.children[2].children[0].innerHTML
let num = item.parentNode.parentNode.children[3].children[1].value
item.innerHTML = price*num
})
}
setsizeallprice()
// 复选框
let checkeds = document.querySelectorAll('.checked')
// 设置全选
function setallselect(el) {
checkeds.forEach(function(item){
item.checked = el.checked
})
// 调用选中个数的方法
setallnum()
}
// 设置单个选中
checkeds.forEach(function(item){
item.addEventListener('click',function(){
let types = true
checkeds.forEach(function(ied) {
if (!ied.checked) {
types = false
}
})
let allchecked = document.querySelector('.allchecked')
allchecked.checked = types
// 调用选中个数的方法
setallnum()
})
})
// 设置选中的个数和总价
function setallnum(){
let checkeds = document.querySelectorAll('.checked')
let nums = document.querySelector('.nums')
// 总价元素
let prices = document.querySelector('.price')
// 获取已经被选中的元素状态
let num = 0
let price = 0
checkeds.forEach(function(item){
if (item.checked) {
num+=1
price+=item.parentNode.parentNode.children[4].children[0].innerHTML*1
}
})
console.log(num);
nums.innerHTML = num
prices.innerHTML = price +"¥"
}
setallnum()
// 清空购物车
function clearcart(params) {
let tb = document.querySelector('tbody')
tb.innerHTML = ''
setallnum()
}
// 删除选中的商品
function delopengoods() {
// 所有的选中状态
let checkeds = document.querySelectorAll('.checked')
checkeds.forEach(function(item){
if (item.checked) {
item.parentNode.parentNode.remove()
}
})
setallnum()
}
</script>
</body>
</html>
效果图: