首先，给大家看下效果图：
该案例包含的功能有：可以对商品价格进行计算，用户可以对商品数量进行增加和勾选，底部有显示用户勾选商品的件数，还有商品总价的结果，此外，用户还有对商品进行移除的功能。
以下是代码部分：
html+css代码：
<!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>
</head>
<style>
* {
padding: 0;
margin: 0;
}
.fl{
float: left;
}
.fr{
float: right;
}
header {
height: 30px;
background-color: rgb(61, 61, 61);
}
header>ul {
margin-right: 100px;
}
li {
list-style: none;
float: right;
line-height: 30px;
padding: 0 10px;
box-sizing: border-box;
}
header a {
text-decoration: none;
color: #ccc;
font-size: 14px;
}
header li:hover {
background-color: rgb(255, 103, 0);
}
body{
background-color: rgb(245,245,245);
}
.banner {
height: 102px;
width: 100%;
background-color: #fff;
border-bottom: 2px solid rgb(255, 103, 0);
}
.banner_left {
width: 50%;
height: 102px;
float: left;
}
.banner_left img {
width: 48px;
height: 48px;
margin-left: 100px;
float: left;
margin-top: 30px;
}
.banner_left>:nth-child(2) {
font-size: 28px;
font-weight: 400;
line-height: 48px;
margin-left: 40px;
float: left;
margin-top: 30px;
}
.banner_left>:nth-child(3) {
font-size: 14px;
margin-left: 10px;
margin-top: 50px;
float: left;
color: #999999;
}
.carList table{
margin: 0 auto;
background-color: #fff;
margin-top: 20px;
border: none;
}
.carList table th,.carList table td{
border-collapse: collapse;
}
.carList table tbody img{
width: 80px;
height: 80px;
}
.carList table td{
border: 0;
}
.resultPrice{
width: 840px;
height: 50px;
margin: 0 auto;
background-color: #fff;
margin-top: 20px;
}
</style>
<body>
<header>
<ul>
<li><a href="javascript:;">我的订单</a></li>
<li><a href="javascript:;">我的收藏</a></li>
<li><a href="javascript:;">购物车</a></li>
<li><a href="javascript:;">欢迎admin</a></li>
</ul>
</header>
<section>
<div class="banner">
<div class="banner_left">
<img src="./images/logo-mi2.png" alt="">
<span>我的购物车</span>
<span>温馨提示：产品是否购买成功，以最终下单为准哦，请尽快结算</span>
</div>
<div class="banner_right"></div>
</div>
<div class="carList">
<table border="0">
<thead>
<th><input type="checkbox" id="selectAll"> 全选</th>
<th width="150px">商品名称</th>
<th width="100px">商品图片</th>
<th width="100px">单价</th>
<th >数量</th>
<th width="100px">小计</th>
<th width="100px">操作</th>
</thead>
<tbody>
<tr>
<td align="center"><input type="checkbox" class="check"></td>
<td align="center">短袖</td>
<td align="center"><img src="https://gw.alicdn.com/bao/uploaded/i2/2207254512241/O1CN012mppDy1SQQHDRIWRC_!!0-item_pic.jpg_300x300q90.jpg_.webp" alt=""></td>
<td align="center"><span class="price">39</span>元</td>
<td>
<button style="width: 20px;" class="deBtn">-</button>
<input type="number" value="1" class="itemCount">
<button style="width: 20px;" class="inBtn">+</button>
</td>
<td align="center"><span class="totalPrice">39.00</span>元</td>
<td align="center"><button class="rmItem">移除商品</button></td>
</tr>
<tr>
<td align="center"><input type="checkbox" class="check"></td>
<td align="center">包包</td>
<td align="center"><img src="https://gw.alicdn.com/bao/uploaded/i3/3937219703/O1CN01YDs4Ui2LY1nQa4Gi2_!!3937219703-0-C2M.jpg_300x300q90.jpg_.webp" alt=""></td>
<td align="center"><span class="price">13.9</span>元</td>
<td>
<button style="width: 20px;" class="deBtn">-</button>
<input type="number" value="1" class="itemCount">
<button style="width: 20px;" class="inBtn">+</button>
</td>
<td align="center"><span class="totalPrice">13.90</span>元</td>
<td align="center"><button class="rmItem">移除商品</button></td>
</tr>
<tr>
<td align="center"><input type="checkbox" class="check"></td>
<td align="center">Redmi Note 11Pro</td>
<td align="center"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6d0a3e7acc3e91e2cfd83dbbe1d1c029.jpg?thumb=1&w=225&h=225&f=webp&q=90" alt=""></td>
<td align="center"><span class="price">1799</span>元</td>
<td>
<button style="width: 20px;" class="deBtn">-</button>
<input type="number" value="1" class="itemCount">
<button style="width: 20px;" class="inBtn">+</button>
</td>
<td align="center"><span class="totalPrice">1799.00</span>元</td>
<td align="center"><button class="rmItem">移除商品</button></td>
</tr>
</tbody>
</table>
</div>
<div class="resultPrice">
<div class="left fl">
<span class="fl" style="width: 100px;line-height: 50px;text-align: center;color: #999999;">继续购物</span>
<div class="line fl" style="width: 20px;line-height: 50px;text-align: center;color: #999999;">|</div>
<div class="fl" style="width: 200px;line-height: 50px;text-align: center;color: #999999;">共<span style="color: rgb(255,103,0);" class="itemAll">0</span>件商品，已选择<span style="color: rgb(255,103,0);" class="selectCnt">0</span>件</div>
</div>
<div class="right fr" style="color: rgb(255, 103, 0); line-height: 50px;font-size: 14px;">
合计：<span class="prices" style="font-size: 20px;">0.00</span>元
<button style="border: none;background-color: rgb(255, 103, 0);width: 130px;height: 50px;color: #fff;">去结算</button>
</div>
</div>
</section>
</body>
<script src="./car.js"></script>
</html>
js代码部分：
var deBtns=document.querySelectorAll('.deBtn')
var inBtns=document.querySelectorAll('.inBtn')
var itemCounts=document.querySelectorAll('.itemCount')
var price=document.querySelectorAll('.price')
var totalPrice=document.querySelectorAll('.totalPrice')
var checks=document.querySelectorAll('.check')
var selectAll=document.querySelector('#selectAll')
var itemAll=document.querySelector('.itemAll')
var selectCnt=document.querySelector('.selectCnt')
var rmItems=document.querySelectorAll('.rmItem')
var prices=document.querySelector('.prices')
var sum=0
for(let i=0;i<deBtns.length;i++){
var cnt=0
deBtns[i].onclick=function(){
if(itemCounts[i].value<=1){
alert('商品数量不能小于1!')
}else{
itemCounts[i].value--
subtotal(i)
prices.innerHTML=totalUnitDe(i)
}
}
inBtns[i].onclick=function(){
itemCounts[i].value++
subtotal(i)
prices.innerHTML=totalUnitAdd(i)
}
checks[i].onclick=function(){
if(isAllSelect()){
selectAll.checked=true
}else{
selectAll.checked=false
}
if(this.checked){
cnt++
prices.innerHTML=total(i)
}else{
cnt--
prices.innerHTML=totalSUB(i)
}
selectCnt.innerHTML=cnt
}
selectAll.onclick=function(){
if(selectAll.checked){
for(var i=0;i<checks.length;i++){
checks[i].checked=true
}
selectCnt.innerHTML=checks.length
prices.innerHTML=allPrice()
}else{
for(var i=0;i<checks.length;i++){
checks[i].checked=false
}
selectCnt.innerHTML=0
prices.innerHTML=0
}
}
rmItems[i].onclick=function(){
rmItem(i)
}
itemAll.innerHTML=checks.length
}
function subtotal(index){
var sum=0
sum=itemCounts[index].value*price[index].innerHTML
totalPrice[index].innerHTML=sum.toFixed(2)
}
function total(index){
sum+=Number(totalPrice[index].innerHTML)
return sum.toFixed(2)
}
function totalSUB(index){
sum-=Number(totalPrice[index].innerHTML)
return sum.toFixed(2)
}
function isAllSelect(){
var cnt=0
for(var i=0;i<checks.length;i++){
if(checks[i].checked){
cnt++
}
}
return cnt==checks.length
}
function rmItem(index){
rmItems[index].parentElement.parentElement.remove()
if(checks[index].checked){
sum-=itemCounts[index].value*price[index].innerHTML
}
prices.innerHTML=sum.toFixed(2)
}
function allPrice(){
sum=0
for(var i=0;i<checks.length;i++){
sum+=itemCounts[i].value*price[i].innerHTML
}
return sum
}
function totalUnitAdd(index){
sum+=Number(price[index].innerHTML)
return sum.toFixed(2)
}
function totalUnitDe(index){
sum-=Number(price[index].innerHTML)
return sum.toFixed(2)
}
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/tech/pnotes/281973.html