这是一个很多老师拿来教学的经典案例，参照购物车HTML代码，依次完成购物车的商品全选、增减商品数量、修改商品小计、计算商品总额、删除商品、选中商品添加背景 等功能
car.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>购物车全选功能</title>
<script type="text/javascript" src="./shop.js"></script>
<!-- 引入初始化 -->
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
a {
text-decoration: none;
color: #666;
}
body {
background: #fff;
color: #666;
font-size: 14px;
}
input {
outline: none;
}
.clearfix::before,
.clearfix::after {
content: '';
display: block;
clear: both;
}
.clearfix {
*zoom: 1;
}
</style>
<!-- 引入购物车样式 -->
<style>
table {
width: 800px;
margin: 0 auto;
border-collapse: collapse;
}
th {
font: normal 14px/50px '宋体';
color: #666;
}
th,
td {
border: none;
text-align: center;
border-bottom: 1px dashed #ccc;
}
input[type='checkbox'] {
width: 13px;
height: 13px;
}
tbody p {
position: relative;
bottom: 10px;
}
tbody .add,
tbody .reduce {
float: left;
width: 22px;
height: 22px;
border: 1px solid #ccc;
text-align: center;
background: none;
outline: none;
cursor: pointer;
}
tbody input[type='text'] {
width: 50px;
float: left;
height: 18px;
text-align: center;
}
tbody .count-c {
width: 98px;
margin: 0 auto;
}
/* button[disabled] {
color: #ddd;
cursor: not-allowed;
} */
tbody tr:hover {
background: #eee;
}
tbody tr.active {
background: rgba(241, 209, 149, 0.945);
}
.controls {
width: 790px;
margin: 10px auto;
border: 1px solid #ccc;
line-height: 50px;
padding-left: 10px;
position: relative;
}
.controls .del-all,
.controls .clear {
float: left;
margin-right: 50px;
}
.controls p {
float: right;
margin-right: 100px;
}
.controls span {
color: red;
}
.controls .pay {
position: absolute;
right: 0;
width: 80px;
height: 54px;
background: red;
font: bold 20px/54px '宋体';
color: #fff;
text-align: center;
bottom: -1px;
}
.controls .total-price {
font-weight: bold;
}
</style>
</head>
<body>
<div class="car">
<table>
<thead>
<tr>
<th><input type="checkbox" class="s_ck_all" />全选</th>
<th>商品</th>
<th>单价</th>
<th>商品数量</th>
<th>小计</th>
<th>操作</th>
</tr>
</thead>
<tbody id="carBody">
<tr>
<td>
<input class="s_ck" type="checkbox" readonly />
</td>
<td>
<img src="https://s1.ax1x.com/2023/01/11/pSmzdxS.jpg" />
<p>牛奶</p>
</td>
<td class="price">5</td>
<td>
<div class="count-c clearfix">
<button class="reduce">-</button>
<input type="text" value="1" />
<button class="add">+</button>
</div>
</td>
<td class="total">5</td>
<td>
<a href="javascript:" class="del">删除</a>
</td>
</tr>
<tr>
<td>
<input class="s_ck" type="checkbox" />
</td>
<td>
<img src="https://s1.ax1x.com/2023/01/11/pSmzdxS.jpg" />
<p>牛奶</p>
</td>
<td class="price">10</td>
<td>
<div class="count-c clearfix">
<button class="reduce">-</button>
<input type="text" value="1" />
<button class="add">+</button>
</div>
</td>
<td class="total">10</td>
<td>
<a href="javascript:" class="del">删除</a>
</td>
</tr>
<tr>
<td>
<input class="s_ck" type="checkbox" />
</td>
<td>
<img src="https://s1.ax1x.com/2023/01/11/pSmzdxS.jpg" />
<p>牛奶</p>
</td>
<td class="price">20</td>
<td>
<div class="count-c clearfix">
<button class="reduce">-</button>
<input type="text" value="1" />
<button class="add">+</button>
</div>
</td>
<td class="total">20</td>
<td>
<a href="javascript:" class="del">删除</a>
</td>
</tr>
<tr>
<td>
<input class="s_ck" type="checkbox" />
</td>
<td>
<img src="https://s1.ax1x.com/2023/01/11/pSmzdxS.jpg" />
<p>牛奶</p>
</td>
<td class="price">35</td>
<td>
<div class="count-c clearfix">
<button class="reduce">-</button>
<input type="text" value="1" />
<button class="add">+</button>
</div>
</td>
<td class="total">35</td>
<td>
<a href="javascript:" class="del">删除</a>
</td>
</tr>
</tbody>
</table>
<div class="controls clearfix">
<a href="javascript:" class="del-all" id="deleteAll">删除所选商品</a>
<a href="javascript:" class="clear">清理购物车</a>
<a href="javascript:" class="pay">去结算</a>
<p>
已经选中<span id="totalCount">0</span>件商品;总价：<span id="totalPrice" class="total-price">0</span>
</p>
</div>
</div>
</body>
</html>
shop.js
window.onload = function(){
const btn = document.querySelector(".s_ck_all");
const buttons = document.querySelectorAll(".s_ck");
const del = document.querySelector(".del-all");
var totalPrice = document.getElementById("totalPrice");
var totalCount = document.getElementById("totalCount");
var carBody = document.getElementById("carBody");
var tr = carBody.getElementsByTagName("tr");
const clear = document.querySelector(".clear");
//第一步 设置全选
btn.onclick = function(){
if(btn.checked)
{
for(let i in buttons)
{
buttons[i].checked = true;
}
}
else{
for(let i in buttons)
{
buttons[i].checked = false;
}
}
getTotal()
};
//第二步 设置选中删除
del.onclick = function(){
let tr = document.querySelectorAll("tr");
//每次点击时更新tr的的长度，以判断是否全部删除
for(i in buttons)
{
if(tr.length === 1)
{
alert("已全部删除");
return;
}
else{
if(buttons[i].checked === true)
{
console.log( buttons[i])
buttons[i].parentNode.parentNode.remove();
getTotal()
}
}
}
};
//数量加减、删除
for(var i=0;i<tr.length;i++){
tr[i].onclick = function(e){
var e = window.event || e;
var target = e.target || e.srcElement;
var input1 = this.getElementsByTagName("input")[1];
switch(target.className){
case 'add':
input1.value = parseInt(input1.value) + 1;
break;
case 'reduce':
if(input1.value > 1){
input1.value = parseInt(input1.value) - 1;
}else{
input1.value = 1;
}
break;
case 'del':
carBody.removeChild(target.parentNode.parentNode)
break;
}
getTotal()
}
}
//合计、已选商品件数
function getTotal(){
var carBody = document.getElementById("carBody");
var tr = carBody.getElementsByTagName("tr");
var price = 0;
var count = 0;
for(var i=0;i<tr.length;i++){
var input = tr[i].getElementsByTagName("input");
if(input[0].checked){
var td2 = tr[i].getElementsByTagName('td')[2].innerText;
var numCount = parseInt(input[1].value);
tr[i].getElementsByTagName('td')[4].innerText = td2 * numCount;
price += parseFloat(tr[i].getElementsByTagName('td')[4].innerText)
count += parseInt(input[1].value)
}
}
totalPrice.innerText = price.toFixed(2);
totalCount.innerText = count;
}
//清空购物车
clear.onclick = function(){
var parent = carBody.parentNode;
parent.removeChild(carBody);
totalPrice.innerText = 0;
totalCount.innerText = 0;
}
};
本文转载自: https://blog.csdn.net/xiaobuzq/article/details/128642416
版权归原作者 xiaobuzq 所有， 如有侵权，请联系我们删除。
版权归原作者 xiaobuzq 所有， 如有侵权，请联系我们删除。