JavaScript 实现购物车
Posted 乱舞春秋__
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript 实现购物车相关的知识，希望对你有一定的参考价值。
主要功能：
（1）点击全选按钮，所有商品都会被选中或取消选中，且小计、商品总数和总价同步变化。
（2）点击加号按钮或减号按钮，可以增加或减少商品的数量，且小计、商品总数和总价同步变化。
（3）点击删除按钮，可以删除商品，且总商品数和总价同步变化。
（4）增加或减少商品的数量时，该商品会自动被选中。
完整代码：
<!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;
}
.column {
float: left;
}
.cart-head {
width: 988px;
height: 32px;
line-height: 32px;
background: #f3f3f3;
padding: 5px 0;
border: 1px solid #e9e9e9;
border-top: 0;
font-size: 12px;
margin-bottom: 1px;
}
.checkbox {
width: 122px;
height: 18px;
line-height: 18px;
padding-left: 11px;
padding-top: 7px;
}
.checkAll {
margin-right: 5px;
vertical-align: text-bottom;
}
.goods {
width: 208px;
}
.props {
width: 140px;
height: 32px;
padding: 0 10px 0 20px;
}
.price {
width: 120px;
padding-right: 50px;
text-align: right;
}
.quantity {
width: 80px;
text-align: center;
}
.sum {
width: 100px;
padding-right: 40px;
text-align: right;
}
.action {
width: 75px;
}
.cart-foot {
position: relative;
width: 988px;
height: 50px;
border: 1px solid #f0f0f0;
font-size: 12px;
}
.cart-foot .left {
float: left;
width: 363px;
height: 50px;
}
.select-all {
float: left;
width: 49px;
height: 50px;
line-height: 50px;
padding-left: 9px;
}
.select-all .checkAll {
margin: 5px 3px 0 0;
vertical-align: text-bottom;
}
.operation {
float: left;
width: 305px;
height: 50px;
line-height: 50px;
}
.operation a {
float: left;
margin-left: 10px;
color: #666;
text-decoration: none;
}
.cart-foot .right {
/* position: absolute;
top: 0;
right: 0; */
float: left;
width: 625px;
height: 50px;
}
.price-sum {
float: right;
width: 220px;
height: 50px;
line-height: 50px;
color: #999;
}
.totalAmount {
padding: 0 3px;
}
.total {
color: #e22312;
font-size: 16px;
font-weight: 700;
}
.btn-area {
float: right;
width: 95px;
height: 50px;
line-height: 50px;
text-align: center;
background-color: #e22312;
font-size: 18px;
font-weight: 700;
}
.btn-area a {
color: #fff;
text-decoration: none;
}
.item {
width: 988px;
height: 119px;
line-height: 119px;
border-top: 1px solid #f0f0f0;
font-size: 12px;
}
.checkUnit {
width: 115px;
height: 119px;
padding-left: 13px;
}
.white {
width: 95px;
height: 119px;
}
.shop {
width: 380px;
height: 119px;
}
.shop img {
margin-top: 15px;
border: 1px solid rgba(204, 204, 204, 0.548);
float: left;
}
.shop .desc {
float: left;
width: 190px;
height: 119px;
line-height: 30px;
padding-top: 15px;
padding-left: 20px;
}
.count button {
width: 23px;
height: 20px;
border: 1px solid #cbcbcb;
background-color: #fff;
}
.count input {
width: 30px;
height: 20px;
outline: none;
text-align: center;
border: 1px solid #cbcbcb;
box-sizing: border-box;
}
.unitPrice {
width: 90px;
height: 119px;
}
.count {
width: 140px;
height: 119px;
}
.subtotal {
width: 72px;
height: 119px;
}
.handle {
width: 83px;
height: 119px;
}
.handle a {
display: block;
line-height: 55px;
color: #808080;
text-decoration: none;
}
.bg {
background-color: rgba(233, 158, 19, 0.226);
}
</style>
</head>
<body>
<div class="cart-head">
<div class="column checkbox">
<input type="checkbox" class="checkAll">
全选
</div>
<div class="column goods">商品</div>
<div class="column props"></div>
<div class="column price">单价</div>
<div class="column quantity">数量</div>
<div class="column sum">小计</div>
<div class="column action">操作</div>
</div>
<div class="cart-body"></div>
<div class="cart-foot">
<div class="left">
<div class="select-all">
<input type="checkbox" class="checkAll">
全选
</div>
<div class="operation">
<a href="javascript:;">删除选中的商品</a>
<a href="javascript:;">移入关注</a>
<a href="javascript:;">
<strong>清理购物车</strong>
</a>
</div>
</div>
<div class="right">
<div class="btn-area">
<a href="javascript:;">去结算</a>
</div>
<div class="price-sum">
<span>已选择</span><em class="totalAmount">0</em><span>件商品</span>
<span>总价：￥</span><em class="total"></em>
</div>
</div>
</div>
<script>
var data = [
{
"name": "你不知道的JavaScript 上卷+中卷+下卷（套装共3册 京东）(图灵出品)",
"src": "./img/book1.jpg",
"price": "181.30"
},
{
"name": "JavaScript高级程序设计 第4版(图灵出品）",
"src": "./img/book2.jpg",
"price": "106.70"
},
{
"name": "JavaScript 指南 原书第7版 犀牛书JS高级程序设计",
"src": "./img/book3.jpg",
"price": "119.90"
}
];
var cartBody = document.querySelector(".cart-body");
var totalQuantity = 0; //商品总数
renderData();
//渲染数据
function renderData() {
var str = "";
for (var i = 0; i < data.length; i++) {
str += "<div class='item'><div class='checkUnit column'><input type='checkbox' class='checkItem'/></div>" +
"<div class='shop column'><img src='" + data[i].src + "'/><div class='desc'>" + data[i].name + "</div></div>" +
"<div class='white column'></div>" +
"<div class='unitPrice column'>￥<span class='perPrice'>" + data[i].price + "</span></div>" +
"<div class='count column'><button class='leftbtn'>-</button><input type='text' class='amount' value='1'/><button class='rightbtn'>+</button></div>" +
"<div class='subtotal column'>￥<span class='smallPrice'>" + data[i].price + "</span></div>" +
"<div class='handle column'><a href='javascript:void(0);' class='delete'>删除</a><a href='javascript:;'>移入关注</a></div></div>";
}
cartBody.innerHTML = str;
}
var checkAlls = document.getElementsByClassName('checkAll'); //获取所有全选框
var checkItems = document.getElementsByClassName('checkItem');
var items = document.getElementsByClassName('item');
var amounts = document.getElementsByClassName('amount');
var totalAmount = document.querySelector('.totalAmount');
var total = document.querySelector('.total');
var totalPrice = 0;
total.innerText = totalPrice.toFixed(2);
//全选功能
for (var i = 0; i < checkAlls.length; i++) {
checkAlls[i].index = i;
checkAlls[i].addEventListener('click', function () {
totalQuantity = 0;
changeStatus(this.checked);
checkAlls[this.index == 0 ? 1 : 0].checked = this.checked;
getTotal();
})
}
function changeStatus(status) {
for (var i = 0; i < checkItems.length; i++) {
checkItems[i].checked = status;
if (status) {
items[i].classList.add('bg');
totalQuantity += parseInt(amounts[i].value);
} else {
items[i].classList.remove('bg');
}
}
totalAmount.innerText = totalQuantity;
}
//减少商品数量功能
var leftbtns = document.getElementsByClassName('leftbtn');
for (var i = 0; i < leftbtns.length; i++) {
leftbtns[i].index = i;
leftbtns[i].addEventListener('click', function () {
var amount = amounts[this.index].value;
if (amount == 1) {
return;
} else {
amount--;
}
amounts[this.index].value = amount;
if (!checkItems[this.index].checked) {
checkItems[this.index].checked = true;
items[this.index].classList.add('bg');
}
getSubtotal(this.index);
getGoodsNum();
getTotal();
})
}
//增加商品数量功能
var rightbtns = document.getElementsByClassName('rightbtn');
for (var i = 0; i < rightbtns.length; i++) {
rightbtns[i].index = i;
rightbtns[i].addEventListener('click', function () {
var amount = amounts[this.index].value;
amount++;
amounts[this.index].value = amount;
if (!checkItems[this.index].checked) {
checkItems[this.index].checked = true;
items[this.index].classList.add('bg');
}
getSubtotal(this.index);
getGoodsNum();
getTotal();
})
}
//计算小计
var perPrice = document.getElementsByClassName('perPrice');
var smallPrice = document.getElementsByClassName('smallPrice');
function getSubtotal(index) {
var Price = parseInt(amounts[index].value) * perPrice[index].innerText;
smallPrice[index].innerText = Price.toFixed(2);
}
//计算商品总数
function getGoodsNum() {
var flag = false;
totalQuantity = 0;
for (var i = 0; i < checkItems.length; i++) {
if (checkItems[i].checked) {
totalQuantity += parseInt(amounts[i].value);
flag = true;
}
}
if (!flag) {
for (var i = 0; i < checkAlls.length; i++) {
checkAlls[i].checked = false;
}
}
totalAmount.innerText = totalQuantity;
}
//选择或取消单个商品
for (var i = 0; i < checkItems.length; i++) {
checkItems[i].index = i;
checkItems[i].addEventListener('click', function () {
if (this.checked) {
items[this.index].classList.add('bg');
} else {
items[this.index].classList.remove('bg');
}
getGoodsNum();
getTotal();
})
}
//计算总价
function getTotal() {
totalPrice = 0;
for (var i = 0; i < checkItems.length; i++) {
if (checkItems[i].checked) {
totalPrice += parseFloat(smallPrice[i].innerText);
}
}
total.innerText = totalPrice.toFixed(2);
}
//删除单件商品（模拟）
var deletebtns = document.getElementsByClassName('delete');
for (var i = 0; i < deletebtns.length; i++) {
deletebtns[i].index = i;
deletebtns[i].addEventListener('click', function () {
items[this.index].remove();
//更新元素的索引
for (var i = 0; i < items.length; i++) {
deletebtns[i].index = i;
leftbtns[i].index = i;
rightbtns[i].index = i;
checkItems[i].index = i;
}
getGoodsNum();
getTotal();
})
}
</script>
</body>
</html>效果图：
默认状态：
全选：
改变商品的数量：
删除商品：
以上是关于JavaScript 实现购物车的主要内容，如果未能解决你的问题，请参考以下文章
html PHP代码片段： - AJAX基本示例：此代码演示了使用PHP和JavaScript实现的基本AJAX功能。