简易购物车（HTML/CSS/JS）
鱼丸子蛋汤 2024-07-04 14:05:05 阅读 92
实现功能
1.能够新增减少商品数量
2.能够新增商品种类
3.能够计算商品总价，总价随着商品数量变化而变化
整体思路
1.先写一个初始商品，包含名称，单价，描述，然后将其隐藏
2.克隆初始商品，重置其名称，单价，描述
3.点击新增，将克隆的商品添加进去
补充
1.一定要为初始商品添加事件监听器,否则初始商品无法+-del
2.每一步操作都要更新总价
完整代码
shopcar.html
<code><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">code>
<title>购物车</title>
<link rel="stylesheet" type="text/css" href="shopcar.css">code>
</head>
<body>
<!-- 整体框架 -->
<div id="frame">code>
<div id="list">code>
<!-- 单个元素样式案例 -->
<div class="unit">code>
<img src="./img/img1.jpg" alt="">code>
<div>
<p>鲜花</p>
<p>单价<b class="jiage">10</b>元</p>code>
<p>简介:平平无奇的一朵鲜花</p>
</div>
<div>
<div class="add">+</div>code>
<div class="geshu">0</div>code>
<div class="delete">del</div>code>
</div>
</div>
</div>
<div id="set">code>
名称:<input type="text" id="name">code>
单价:<input type="text" id="price">code>
描述:<input type="text" id="description">code>
<!--
添加图片:<input type="file" id="imageUpload"> code>
-->
<input id="tijiao" type="button" value="新增">code>
<p>
<h1>总价:<b id="sum">0</b></h1>code>
</p>
</div>
</div>
<script src="shopcar.js"></script>code>
</body>
</html>
shopcar.js
// 在页面加载完成后隐藏初始商品
document.addEventListener('DOMContentLoaded', function () {
var initialProduct = document.querySelector(".unit");
initialProduct.style.display = 'none';
});
// 增加商品函数
function addProductEventListener(newUnit) {
var geshu = 0;
var addButton = newUnit.querySelector(".add");
var subButton = newUnit.querySelector(".sub");
var deleButton = newUnit.querySelector(".delete");
var geshuDisplay = newUnit.querySelector(".geshu");
var unitPrice = parseFloat(newUnit.querySelector(".jiage").textContent);
//------➕增加按钮
addButton.addEventListener('click', function () {
geshu++;
// 更新个数展示区域的数字
geshuDisplay.textContent = geshu;
// 更新总价
sum.textContent = zongjia();
});
//------➖减少按钮
subButton.addEventListener('click', function () {
if (geshu > 0) {
geshu--;
geshuDisplay.textContent = geshu;
sum.textContent = zongjia();
}
else {
alert("已经是0,不能再减少了!");
}
});
//------del删除按钮
deleButton.addEventListener('click', function () {
newUnit.remove();
// 更新总价
sum.textContent = zongjia();
});
//------总价
sum.textContent = zongjia();
function zongjia() {
var zj = 0;
// 遍历所有的商品
var unitDisplay = document.querySelectorAll(".unit");
unitDisplay.forEach(function (unit) {
var jiage = parseFloat(unit.querySelector(".jiage").textContent);
var geshu = parseInt(unit.querySelector(".geshu").textContent);
// 计算总价=个数*价格
zj += geshu * jiage;
});
return zj;
}
}
// 调用增加商品函数
// 一定要为初始商品添加事件监听器,否则初始商品无法+-del
addProductEventListener(document.querySelector(".unit"));
//------新增商品种类
// 提交按钮
var tijiaoButton = document.querySelector("#tijiao")
tijiaoButton.addEventListener('click', function () {
var name = document.querySelector("#name").value;
var price = document.querySelector("#price").value;
var description = document.querySelector("#description").value;
// var imageUpload = document.querySelector("#imageUpload").files[0]; // 获取上传的图片文件
// 克隆之前存在的那个商品
var unitclone = document.querySelector(".unit").cloneNode(true);
// 显示克隆的商品
unitclone.style.display = 'inline-block';
unitclone.querySelector("p").textContent = name;
unitclone.querySelector(".jiage").textContent = price;
unitclone.querySelector(".geshu").textContent = 0;//一定要个数归0,否则会克隆初始商品的个数
unitclone.querySelector("p:nth-of-type(3)").textContent = "描述" + description;
// 将新克隆的商品元素添加到页面中
document.querySelector("#list").appendChild(unitclone);
// 为新增商品添加事件监听器
addProductEventListener(unitclone);
// 更新总价
sum.textContent = zongjia();
});
shopcar.css
* {
margin: 0px;
padding: 0px;
text-align: center;
}
/* 整个大框框 */
#frame {
width: 700px;
height: 500px;
border: 2px solid black;
/* 居中 */
top: 50%;
left: 50%;
position: absolute;
transform: translate(-50%, -50%);
}
/* 底部的商品列表 */
#list {
width: 100%;
height: 430px;
border-bottom: 1px solid black;
overflow-y: scroll;
}
/* 单个商品样式 */
.unit {
width: 90%;
height: 90px;
margin: 10px auto;
border: 1px solid black;
}
/* 放置商品图片 */
.unit>img {
width: 20%;
height: 100%;
float: left;
}
/* 放置商品信息和按钮 */
.unit>div {
width: 40%;
height: 100%;
float: left;
}
/* 选择所有带有class为unit的元素
的最后一个直接子div内的所有直接子div
就是➕➖ */
.unit>div:last-child>div {
width: 25%;
height: 100%;
float: left;
/* 设置行高居中 */
font-size: 30px;
color: #ff8f8f;
line-height: 270%;
}
/* 悬停变色,让这个元素看上去更像按钮 */
.unit>div:last-child>div:hover {
font-size: 30px;
color: #ff0000;
}
/* 设置面板 */
#set {
width: 100%;
height: 100px;
}
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。