购物车结算样式:
<!DOCTYPE html>
<html lang="ch-zn">
<head>
<meta charset="UTF-8">
<title>moban</title>
<style>
html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;}
header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display:block;}
table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;font-weight:normal;}
html,body,fieldset,img,iframe,abbr{border:0;}
i,cite,em,var,address,dfn{font-style:normal;}
[hidefocus],summary{outline:0;}
li{list-style:none;}
h1,h2,h3,h4,h5,h6,small{font-size:100%;}
sup,sub{font-size:83%;}
table{
1000px;
border-collapse: collapse;
border-color: #930;
margin: 50px auto 0;
user-select: none;
}
table tr td{
250px;
height: 100px;
text-align: center;
}
table tr.title td{
height: 50px;
background: #c36;
color: #fff;
font-weight: bold;
font-size: 14px;
}
table tr td img{
display: block;
auto;
height: 70px;
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{
30px;
height: 30px;
background: #ddd;
line-height: 30px;
cursor: pointer;
font-weight: bold;
font-size: 14px;
}
table tr td.number span.num{
50px;
height: 28px;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
line-height: 28px;
color: #c36;
}
.box{
1000px;
height: 50px;
background: #c36;
margin: 10px auto;
}
.box p{
float: right;
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">
<thead></thead>
<tbody>
<tr class="title">
<td>商品</td>
<td>单价</td>
<td>数量</td>
<td>小计</td>
</tr>
<tr>
<td><img src="https://afeifeifei.github.io/class-demo/js-demo/2-08-03/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="https://afeifeifei.github.io/class-demo/js-demo/2-08-03/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="https://afeifeifei.github.io/class-demo/js-demo/2-08-03/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="https://afeifeifei.github.io/class-demo/js-demo/2-08-03/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>
</tbody>
</table>
<div class="box">
<p class="totalPrice">合计费用： <span>0</span> ￥</p>
<p class="totalNum">已选中商品： <span>0</span> 个</p>
</div>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>
//购物车结账
(function () {
//整理数据,开发中学会整理数据,用数组的形式包裹
let Price = [
{danjia:8,num:0},
{danjia:10,num:0},
{danjia:12,num:0},
{danjia:23,num:0}
]
//获取标签的权限
let Add = document.querySelectorAll(".add"),
Down = document.querySelectorAll(".down"),
AddLen = Add.length,
Anum = document.querySelectorAll(".num"),
Aprice = document.querySelectorAll(".price"),
Oprcie = document.querySelector(".box .totalPrice span"),
Onum = document.querySelector(".box .totalNum span")
//定义函数---用于HTML相关操作(封装函数)
function change(i){
//html的变化
Anum[i].innerText = Price[i].num;
Aprice[i].innerText = Price[i].danjia * Price[i].num;
//通过循环，把所有的数据相加，把所有的小计价格相加
let tPrice = 0 , tnum = 0
for (let j = 0; j <AddLen; j++) {
tnum += Price[j].num;
tPrice += Price[j].danjia * Price[j].num;
};
//html的变化
Onum.innerText = tnum;
Oprcie.innerText = tPrice;
}
//点击事件
for (let i = 0; i <AddLen; i++) {
Add[i].onclick = function(){
Price[i].num ++;
/* console.log("点击了+"); */
//函数执行
change(i);
}
Down[i].onclick = function(){
if(Price[i].num === 0)return;
Price[i].num --;
/* console.log("点击了-"); */
//函数执行
change(i);
}
};
})();
</script>
</body>
<!--
笔记区域
-->
</html>
样式展示
