购物车结算普通写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
font-family: Microsoft yahei, serif;
}
table {
width: 1000px;
border-collapse: collapse;
border-color: #930;
margin: 50px auto 0;
user-select: none;
}
table tr td {
width: 250px;
height: 100px;
text-align: center;
}
table tr.title td {
height: 50px;
background-color: #c36;
color: #fff;
font-weight: bold;
font-size: 14px;
}
table tr td img {
display: block;
width: auto;
height: 70;
margin: 0 auto;
}
table tr td.number span {
display: inline-block;
font-size: 12px;
text-align: center;
}
table tr td.number span.down,
table tr td.number span.add {
width: 30px;
height: 30px;
background: #ddd;
line-height: 30px;
cursor: pointer;
font-weight: bold;
font-size: 14px;
}
table tr td.number span.num {
width: 50px;
height: 28px;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
line-height: 28px;
color: #c36;
}
.box {
width: 1000px;
height: 50px;
background-color: #c36;
margin: 10px auto;
}
.box p {
float: right;
width: 250px;
height: 50px;
line-height: 50px;
color: #fff;
font-size: 14px;
}
.box p span {
color: #f4e5a9;
font-size: 16px;
font-weight: bold;
}
</style>
</head>
<body>
<table border="1">
<tr class="title">
<td>商品</td>
<td>单价</td>
<td>数量</td>
<td>小计</td>
</tr>
<tr>
<td><img src="img/shop1.jpg" alt=""></td>
<td class="danjia">8</td>
<td class="number"><span class="down">-</span>
<span class="num">0</span><span class="add">+</span>
</td>
<td class="price">0</td>
</tr>
<tr>
<td><img src="img/shop2.jpg" alt=""></td>
<td class="danjia">10</td>
<td class="number"><span class="down">-</span>
<span class="num">0</span><span class="add">+</span>
</td>
<td class="price">0</td>
</tr>
<tr>
<td><img src="img/shop3.jpg" alt=""></td>
<td class="danjia">12.5</td>
<td class="number"><span class="down">-</span>
<span class="num">0</span><span class="add">+</span>
</td>
<td class="price">0</td>
</tr>
<tr>
<td><img src="img/shop4.jpg" alt=""></td>
<td class="danjia">23</td>
<td class="number"><span class="down">-</span>
<span class="num">0</span><span class="add">+</span>
</td>
<td class="price">0</td>
</tr>
</table>
<div class="box">
<p class="totalPrice">合计费用：￥<span>0</span></p>
<p class="totalNum">已选中商品：<span>0</span>个</p>
</div>
<script>
//获取元素
let aAdd = [...document.querySelectorAll('.add')],
aDown = [...document.querySelectorAll('.down')],
aNum = document.querySelectorAll('.num'),
aPrice = document.querySelectorAll('.price'),
totalNum = document.querySelector('.totalNum span'),
totalPrice = document.querySelector('.totalPrice span')
//信号量
let danjia = [8, 10, 12.5, 23],
numArr = [0, 0, 0, 0],
priceArr = [0, 0, 0, 0]//小计
//批量绑定事件
aAdd.forEach((oAdd, index) => {
oAdd.onclick = function () {
numArr[index]++;
aNum[index].innerHTML = numArr[index]
//计算对应的小计
priceArr[index] = numArr[index] * danjia[index]
aPrice[index].innerHTML = priceArr[index]//小计加到页面上
//计算总数量
totalNum.innerHTML = numArr.reduce((prev, next) => (prev + next), 0) //初始值是0
//计算总价格
totalPrice.innerHTML = priceArr.reduce((prev, next) => (prev + next), 0)
}
})
aDown.forEach((oDown, index) => {
oDown.onclick = function () {
numArr[index]--;
if (numArr[index] < 0) numArr[index] = 0;
aNum[index].innerHTML = numArr[index]
priceArr[index] = numArr[index] * danjia[index]
aPrice[index].innerHTML = priceArr[index]
//计算总数量
totalNum.innerHTML = numArr.reduce((prev, next) => (prev + next), 0) //初始值是0
//计算总价格
totalPrice.innerHTML = priceArr.reduce((prev, next) => (prev + next), 0)
}
})
</script>
</body>
</html>
购物车结算抽离函数写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
font-family: Microsoft yahei, serif;
}
table {
width: 1000px;
border-collapse: collapse;
border-color: #930;
margin: 50px auto 0;
user-select: none;
}
table tr td {
width: 250px;
height: 100px;
text-align: center;
}
table tr.title td {
height: 50px;
background-color: #c36;
color: #fff;
font-weight: bold;
font-size: 14px;
}
table tr td img {
display: block;
width: auto;
height: 70;
margin: 0 auto;
}
table tr td.number span {
display: inline-block;
font-size: 12px;
text-align: center;
}
table tr td.number span.down,
table tr td.number span.add {
width: 30px;
height: 30px;
background: #ddd;
line-height: 30px;
cursor: pointer;
font-weight: bold;
font-size: 14px;
}
table tr td.number span.num {
width: 50px;
height: 28px;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
line-height: 28px;
color: #c36;
}
.box {
width: 1000px;
height: 50px;
background-color: #c36;
margin: 10px auto;
}
.box p {
float: right;
width: 250px;
height: 50px;
line-height: 50px;
color: #fff;
font-size: 14px;
}
.box p span {
color: #f4e5a9;
font-size: 16px;
font-weight: bold;
}
</style>
</head>
<body>
<table border="1">
<tr class="title">
<td>商品</td>
<td>单价</td>
<td>数量</td>
<td>小计</td>
</tr>
<tr>
<td><img src="img/shop1.jpg" alt=""></td>
<td class="danjia">8</td>
<td class="number"><span class="down">-</span>
<span class="num">0</span><span class="add">+</span>
</td>
<td class="price">0</td>
</tr>
<tr>
<td><img src="img/shop2.jpg" alt=""></td>
<td class="danjia">10</td>
<td class="number"><span class="down">-</span>
<span class="num">0</span><span class="add">+</span>
</td>
<td class="price">0</td>
</tr>
<tr>
<td><img src="img/shop3.jpg" alt=""></td>
<td class="danjia">12.5</td>
<td class="number"><span class="down">-</span>
<span class="num">0</span><span class="add">+</span>
</td>
<td class="price">0</td>
</tr>
<tr>
<td><img src="img/shop4.jpg" alt=""></td>
<td class="danjia">23</td>
<td class="number"><span class="down">-</span>
<span class="num">0</span><span class="add">+</span>
</td>
<td class="price">0</td>
</tr>
</table>
<div class="box">
<p class="totalPrice">合计费用：￥<span>0</span></p>
<p class="totalNum">已选中商品：<span>0</span>个</p>
</div>
<script>
//获取元素
let aAdd = [...document.querySelectorAll('.add')],
aDown = [...document.querySelectorAll('.down')],
aNum = document.querySelectorAll('.num'),
aPrice = document.querySelectorAll('.price'),
totalNum = document.querySelector('.totalNum span'),
totalPrice = document.querySelector('.totalPrice span')
//信号量
let danjia = [8, 10, 12.5, 23],
numArr = [0, 0, 0, 0],
priceArr = [0, 0, 0, 0]//小计
//批量绑定事件
aAdd.forEach((oAdd, index) => {
oAdd.onclick = function () {
numArr[index]++;
priceChange(index)
}
})
aDown.forEach((oDown, index) => {
oDown.onclick = function () {
numArr[index]--;
if (numArr[index] < 0) numArr[index] = 0;
priceChange(index)
}
})
function priceChange(index) { //共用代码抽离为一个函数
aNum[index].innerHTML = numArr[index]
priceArr[index] = numArr[index] * danjia[index]
aPrice[index].innerHTML = priceArr[index]
//计算总数量
totalNum.innerHTML = numArr.reduce((prev, next) => (prev + next), 0) //初始值是0
//计算总价格
totalPrice.innerHTML = priceArr.reduce((prev, next) => (prev + next), 0)
}
</script>
</body>
</html>
网友评论