<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>//引入jQuery
<style>
* {
margin: 0;
padding: 0;
}
.title {
width: 1000px;
height: 50px;
background-color: skyblue;
border: 3px solid rgb(245, 170, 8);
}
.title div {
float: left;
width: 150px;
height: 50px;
line-height: 50px;
text-align: center;
}
.title .T-checked {
width: 75px;
height: 50px;
}
.title .T-numb {
width: 250px;
}
.title .T-op {
width: 75px;
}
.goods {
width: 1000px;
border: 3px solid rgb(245, 170, 8);
border-top: none;
}
.content {
width: 1000px;
background-color: palegreen;
margin-bottom: 10px;
height: 50px;
}
.content div {
float: left;
width: 150px;
height: 50px;
line-height: 50px;
text-align: center;
/* background-color: palegreen; */
/* margin-top: 10px; */
}
.content .C-checked {
width: 75px;
height: 50px;
}
.content .C-numb {
width: 250px;
}
.content .C-numb input {
width: 30px;
height: 30px;
}
.content .sub:hover {
cursor: pointer;
}
.content .add:hover {
cursor: pointer;
}
.content .disabled:hover {
cursor: not-allowed;
}
.content .C-op {
width: 75px;
}
.total {
width: 1000px;
height: 100px;
border: 3px solid rgb(245, 170, 8);
border-top: none;
}
.total div {
float: right;
width: 200px;
height: 100px;
line-height: 100px;
text-align: center;
}
.total .payment {
background-color: skyblue;
}
.total .totalPrice {
background-color: orange;
}
.emptyCart {
width: 1000px;
height: 400px;
background-image: url("https://www.jkwedu.net/images/empty/cart.png");
background-size: 100% 100%;
}
</style>
</head>
<body>
<div class="title">
<div class="T-checked"><input type="checkbox" class="allCheck" onchange="both()">选择</div>
<div class="T-order">编号</div>
<div class="T-name">商品名称</div>
<div class="T-price">商品价格</div>
<div class="T-numb">商品数量</div>
<div class="T-price">商品小计</div>
<div class="T-op">操作</div>
</div>
<div class="goods"></div>
<!-- <input type="checkbox" checked="checked"> -->
<div class="total">
<div class="payment">去结算</div>
<div class="totalPrice">总价格合计：<span class="allMoney">8888</span>元</div>
</div>
</body>
<script>
// 定义了一个`cartList`数组，用于存储购物车中的商品信息。每个商品对象包含是否选中、名称、价格、数量和小计等属性。
var cartList = [
{
isChecked: true,
name: "手机",
price: 890,
num: 1,
subtotal: 890
},
{
isChecked: false,
name: "电脑",
price: 890,
num: 1,
subtotal: 890
},
{
isChecked: true,
name: "平板",
price: 890,
num: 1,
subtotal: 890
},
{
isChecked: true,
name: "手机",
price: 890,
num: 1,
subtotal: 890
},
{
isChecked: false,
name: "电脑",
price: 890,
num: 1,
subtotal: 890
},
{
isChecked: true,
name: "平板",
price: 890,
num: 1,
subtotal: 890
}
];
/* `setPage()`函数用于根据`cartList`数组渲染购物车页面。在函数中，首先判断购物车是否为空，如果为空，
显示一个背景图片表示购物车为空；如果不为空，通过遍历数组，生成每个商品的HTML代码，并插入到`.goods`元素中。 */
function setPage(cartList) {
// console.log(124);
var str = " "
if (cartList.length == 0) {
str = `
<div class="emptyCart"></div>
</div>
`
} else {
for (var i = 0; i < cartList.length; i++) {
str += `
<div class="content">
<div class="C-checked"><input class="a" type="checkbox" ${cartList[i].isChecked ? "checked" : ''} data-index="${i}"></div>
<div class="C-order">${i + 1}</div>
<div class="C-name">${cartList[i].name}</div>
<div class="C-price">${cartList[i].price}</div>
<div class="C-numb">
<input type="button" class="sub ${cartList[i].num == 1 ? "disabled" : ''}" ${cartList[i].num == 1 ? "disabled" : ''} value="-" data-index= "${i}">
<input type="text" value="${cartList[i].num}" class="su">
<input type="button" class="add" value="+" data-index="${i}"></div>
<div class="C-price">${cartList[i].subtotal}</div>
<div class="C-op"><input type="button" class="del" value="删除" onclick="setDel()" data-index="${i}"></div>
</div>
`
}
}
$(".goods").html(str);
$(".content:even").css("background-color", "pink");
$(".content:odd").css("background-color", "skyblue");
setSingleChecked()
setAllChecked()
setDel()
setSub()
setAdd()
// setSubtotal()
}
// 计算总价格
/* `TotalPrice()`函数用于计算购物车中选中商品的总价格合计。
在函数中，遍历`cartList`数组，如果某个商品被选中，则将其小计累加到`totalPrice`中。 */
function TotalPrice() {
var totalPrice = 0;
for (var i = 0; i < cartList.length; i++) {
if (cartList[i].isChecked) {
totalPrice += cartList[i].subtotal
}
}
$(".allMoney").html(totalPrice)
}
// `update()`函数用于更新页面，调用`setPage()`和`TotalPrice()`函数，以显示最新的购物车页面和总价格。
function update() {
setPage(cartList)
TotalPrice()
}
update();//更新页面即初始界面
/* `setSingleChecked()`函数用于处理单个商品复选框的点击事件。通过遍历`a`类名的复选框元素，
为每个复选框添加`onchange`事件监听器，在事件处理函数中，反转相应商品在`cartList`数组中的选中状态，并更新页面。 */
function setSingleChecked() {
var singleCheckeds = document.querySelectorAll(".a")
for (let i = 0; i < singleCheckeds.length; i++) {
// 给每一个复选框设置点击事件
singleCheckeds[i].onchange = function () {
// console.log(i);
// 改数组数据
cartList[this.getAttribute("data-index")].isChecked = !cartList[this.getAttribute("data-index")].isChecked
setPage(cartList)
TotalPrice()
setAllChecked()
}
}
}
//全选框
/* `setAllChecked()`函数用于处理全选框的点击事件。通过获取全选框元素，遍历`cartList`数组，
统计选中的商品数量。如果数量等于购物车中的商品总数，将全选框设置为选中状态，否则取消选中状态。 */
function setAllChecked() {
var count = 0;
var allCheck = document.querySelector(".allCheck")
for (let i = 0; i < cartList.length; i++) {
if (cartList[i].isChecked) {
count++
}
if (count == cartList.length) {
allCheck.checked = true
}
else {
allCheck.checked = false
}
}
// console.log(".allCheck");
}
// 点击全选按钮后全选中
/* `both()`函数用于处理全选框的点击事件。当全选框被点击时，遍历`cartList`数组的每个商品，
根据全选框的状态，设置商品的选中状态。然后调用`setPage()`和`TotalPrice()`函数，更新页面和总价格。 */
function both() {
var allCheck = document.querySelector(".allCheck")
if (allCheck.checked) {
for (var i = 0; i < cartList.length; i++) {
cartList[i].isChecked = true
}
}
else {
for (var i = 0; i < cartList.length; i++) {
cartList[i].isChecked = false
}
}
setPage(cartList)
TotalPrice();
}
// 删除数据
/*
`setDel()`函数用于处理删除按钮的点击事件。通过遍历`.`del`类名的按钮元素，为每个按钮添加`onclick`事件监听器。
在事件处理函数中，使用`confirm()`函数弹出确认对话框，如果用户点击了"确定"，
则从`cartList`数组中移除相应位置的商品对象，并调用`setPage()`和`TotalPrice()`函数，更新页面和总价格。
*/
function setDel() {
var dels = document.querySelectorAll(".del")
for (let i = 0; i < dels.length; i++) {
dels[i].onclick = function () {
if (confirm("您是否要删除该商品？")) {
let index = this.getAttribute("data-index")
cartList.splice(index, 1)
console.log(cartList, 123456);
setPage(cartList)
TotalPrice()
}
}
}
}
//减少商品数量
/*
`setSub()`函数用于处理减少按钮的点击事件。通过遍历`.`sub`类名的按钮元素，为每个按钮添加`onclick`事件监听器。
在事件处理函数中，获取相应商品的索引值，如果商品的数量大于1，则减少数量，调用`setSubtotal()`函数更新小计，
然后调用`setPage()`和`TotalPrice()`函数，更新页面和总价格。
*/
function setSub() {
var subs = document.querySelectorAll(".sub")
var index = 0;
for (var i = 0; i < subs.length; i++) {
subs[i].onclick = function () {
index = this.getAttribute("data-index")
// console.log(index);
if (cartList[index].num > 1) {
cartList[index].num--
setSubtotal()
setPage(cartList)
TotalPrice()
}
else {
alert("不能小于1")
}
}
}
}
// 增加商品数量
/*
`setAdd()`函数用于处理增加按钮的点击事件。通过遍历`.`add`类名的按钮元素，为每个按钮添加`onclick`事件监听器。
在事件处理函数中，获取相应商品的索引值，增加商品的数量，调用`setSubtotal()`函数更新小计，
然后调用`setPage()`和`TotalPrice()`函数，更新页面和总价格。
*/
function setAdd() {
var adds = document.querySelectorAll(".add")
var index = 0;
for (var i = 0; i < adds.length; i++) {
adds[i].onclick = function () {
console.log(123);
index = this.getAttribute("data-index")
console.log(index);
cartList[index].num++
console.log(cartList[index].num);
setSubtotal()
setPage(cartList)
TotalPrice()
}
}
}
// 商品小计
/*
`setSubtotal()`函数用于根据商品的数量和价格计算商品的小计。
遍历`cartList`数组，根据商品的数量乘以价格，计算出小计，并存储在相应商品对象的`subtotal`属性中。
*/
function setSubtotal() {
for (var i = 0; i < cartList.length; i++) {
cartList[i].subtotal = cartList[i].num * cartList[i].price
}
}
/* 整个代码的逻辑是基于JavaScript实现的购物车功能，对页面的增删改查操作和计算总价格等进行了处理。通过上述函数的调用，可以展示和操作购物车功能。 */
</script>
</html>利用js和·jQuery实现简单购物车功能
最新推荐文章于 2023-08-30 21:53:10 发布
2824
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
