web前端——购物车模拟

最新推荐文章于 2023-07-25 21:49:58 发布

ZPD_zpd

最新推荐文章于 2023-07-25 21:49:58 发布

阅读量1.3k

点赞数 5

文章标签： html css js html5 javascript

本文链接：https://blog.csdn.net/zpd_zpd/article/details/110477678

版权

本文通过HTML和CSS创建了一个模拟的商品栏，并利用纯JavaScript实现了全选、单个商品删除、批量删除、数量增减及金额计算等功能。详细介绍了每个功能的实现步骤，包括事件监听和DOM操作。此外，还展示了全选按钮和多选框的联动效果以及批量删除选中商品的逻辑。

摘要由CSDN通过智能技术生成

实现功能：
①模拟从数据库传输来的数据添加到页面。
②全选。
③单个商品删除。
④批量删除。
⑤数量增加和删除按钮。
⑥金额随数量变化。
⑦总数量随选中商品变化。
⑧总金额随商品数量变化。

使用的是底层JS，如果使用jQuery等会更简便。

先做页面HTML和css，做个假的商品栏，使用CSS添加样式。
在这里插入图片描述

<body>
	<div id="box">
		//<!-- 信息栏 -->
		<div id="topbox">
			<div id="allbox" class="div">
				<input type="checkbox" name="全选" id="all" value="全选" />全选
			</div>
			<div id="information" class="div">商品信息</div>
			<div class="div">单价</div>
			<div class="div">数量</div>
			<div class="div">金额</div>
			<div class="div">操作</div>
		</div>
		
		//<!-- 店铺，商品栏 -->
		<div class="shop">
			<input type="checkbox" name="店铺全选" id="chall1" value="店铺全选" />
			<a href="">店铺</a>
			//<!-- 商品栏 -->
			<ul id="ul">
				//<!-- 商品 -->
				<li class="shoplist">
					//<!-- 多选框，商品图片 -->
					<div class="imgbox">
						<input type="checkbox" name="多选" class="commodity" value="" />
						<div class="space"></div>
						<img src="img/O1CN01RO1gOG2KyIg5AGYUr_!!654519625.jpg" alt="">
					</div>
					
					//<!-- 商品介绍 -->
					<div class="text">
						<a href="">【火拼价】Asus/华硕RT-AC86U双频无线AC2900M千兆路由器家用穿墙高速wifi 5g无限漏油器智能电信500M宽带ac86u华硕</a>
					</div>
					//<!-- 商品单价 -->
					<div class="price">￥59</div>
					//<!-- 商品数量 -->
					<div class="numbox">
						<button type="button" class="rebtn">-</button>
						<input type="text" name="" class="num" value="1" />
						<button type="button" class="addbtn">+</button>
					</div>
					//<!-- 商品金额 -->
					<div class="sum">￥59</div>
					//<!-- 删除商品 -->
					<div>
						<span>移入收藏夹</span>
						<br />
						<span>删除</span>
					</div>

				</li>
			</ul>
		</div>
	</div>

	<div id="footer">
		<div id="left">
			//<!-- 全选按钮 -->
			<div id="allbox" class="div">
				<input type="checkbox" name="全选" id="chall2" value="全选" />全选
			</div>
			//<!-- 批量删除 -->
			<div id="del">删除</div>
		</div>
		<div id="right">
			//<!-- 已选商品数量 -->
			<div id="selected">已选商品<span id="senum">0</span>件</div>
			//<!-- 已选商品合计金额 -->
			<div id="total">合计(不含运费)：<span id="allsum">0</span></div>
			<button type="button" id="settlement">结算</button>
		</div>

	</div>
	 <script src="Shopping.js" type="text/javascript" charset="utf-8"></script>
</body>

CSS样式，模拟做出来即可

* {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
	text-decoration: none;
}

#box {
	min-width: 1100px;
	width: 1100px;
	margin: 0px auto;
}

/* 顶部说明栏 */
#topbox {
	display: flex;
}

.div {
	width: 120px;
}

#information {
	width: 500px;
}

/* 店铺 */
.shop {
	margin-top: 20px;
}

/* 商品列表 */
#ul {
	margin-top: 20px;
	border: 1px solid #000000;
}

#ul li {
	border-bottom: 1px solid #C0C0C0;
}

.shoplist {
	margin-top: 20px;
	display: flex;
}

.shoplist div {
	width: 120px;
}

.imgbox {
	width: 120px;
	display: flex;
}

.imgbox .commodity {
	top: 0px;
}

.imgbox .space {
	width: 10px;
	height: 10px;
}

.imgbox img {
	width: 80px;
}

.text {
	display: block;
	width: 500px !important;
}

.numbox button {
	width: 20px;
}

.num {
	width: 30px;
}

/* 底部 */
#footer {
	min-width: 1100px;
	width: 1100px;
	height: 40px;
	background-color: #C0C0C0;
	position: fixed;
	bottom: 0px;
	left: 150px;
	display: flex;
}

#left {
	width: 500px;
	display: flex;
	align-items: center;
}

#right {
	width: 600px;
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

#selected {
	width: 150px;
}

#total {
	width: 200px;
}

#settlement {
	width: 80px;
	height: 40px;
}

重点JS:
创建对象模拟从数据库获取的数据

var arr = [{
	img: "img/O1CN01RO1gOG2KyIg5AGYUr_!!654519625.jpg",
	text: "【火拼价】Asus/华硕RT-AC86U双频无线AC2900M千兆路由器家用穿墙高速wifi 5g无限漏油器智能电信500M宽带ac86u华硕",
	price: 59,
	num: 1
}, {
	img: "img/O1CN01RO1gOG2KyIg5AGYUr_!!654519625.jpg",
	text: "【火拼价】Asus/华硕RT-AC86U双频无线AC2900M千兆路由器家用穿墙高速wifi 5g无限漏油器智能电信500M宽带ac86u华硕",
	price: 59,
	num: 1
}, {
	img: "img/O1CN01RO1gOG2KyIg5AGYUr_!!654519625.jpg",
	text: "【火拼价】Asus/华硕RT-AC86U双频无线AC2900M千兆路由器家用穿墙高速wifi 5g无限漏油器智能电信500M宽带ac86u华硕",
	price: 59,
	num: 1
}, {
	img: "img/O1CN01RO1gOG2KyIg5AGYUr_!!654519625.jpg",
	text: "【火拼价】Asus/华硕RT-AC86U双频无线AC2900M千兆路由器家用穿墙高速wifi 5g无限漏油器智能电信500M宽带ac86u华硕",
	price: 59,
	num: 1
}];

使用for循环向ul中添加内容

for (var i = 0; i < arr.length; i++) 
	// 获取ul元素
	var ul = document.getElementById("ul");
	
	
	// 创建li节点
	var li = document.createElement("li");
	// 给li添加类名
	li.className = "shoplist";
	//添加到ul中
	ul.appendChild(li);


	// 创建imgbox div节点
	var imgbox = document.createElement("div");
	// 给imgbox添加类名
	imgbox.className = "imgbox";
	//添加到li中
	li.appendChild(imgbox);


	// 在imgbox内创建多选框节点
	var commodity = document.createElement("input");
	//给input添加类型
	commodity.type = "checkbox";
	//添加类名
	commodity.className = "commodity";
	//添加到imgbox中
	imgbox.appendChild(commodity);


	//在imgbox内创建空白div 
	var space = document.createElement("div");
	//添加类名
	space.className = "space";
	//添加到imgbox中
	imgbox.appendChild(space);


	// 在imgbox内创建img节点
	var img = new Image();
	// var img=document.createElement("img");
	img.src = arr[i].img;
	// 添加到imgbox
	imgbox.appendChild(img);


	//在li内创建text文本节点
	var text = document.createElement("div");
	// 添加类名
	text.className = "text";
	// 添加到li
	li.appendChild(text);

	// 创建超链接节点
	var a = document.createElement("a");
	// 设置href属性
	a.href = "";
	// 获取超链接文本
	a.innerHTML = arr[i].text;
	// 添加到text内
	text.appendChild(a)


	// 创建price单价 div节点
	var price = document.createElement("div");
	//设置内容
	price.innerHTML = "￥" + arr[i].price;
	//添加到li内
	li.appendChild(price);


	// 创建numbox数量 div节点
	var numbox = document.createElement("div");
	// 添加类名
	numbox.className = "numbox";
	// 添加到li中
	li.appendChild(numbox);


	// 创建-按钮
	var rebtn = document.createElement("button");
	rebtn.innerHTML = "-";
	// 添加类名
	rebtn.className = "rebtn";
	//添加到numbox
	numbox.appendChild(rebtn);

	// 创建文本框节点
	var num = document.createElement("input");
	// 设置属性
	num.type = "text";
	// 添加类名
	num.className = "num";
	num.value = arr[i].num;
	//添加到numbox
	numbox.appendChild(num);

	//创建+按钮
	var addbtn = document.createElement("button");
	addbtn.innerHTML = "+";
	// 添加类名
	addbtn.className = "addbtn";
	//添加到numbox
	numbox.appendChild(addbtn);


	// 创建sum总价节点
	var sum = document.createElement("div");
	//添加类名
	sum.className="sum";
	//计算价格
	sum.innerHTML = "￥" + num.value * arr[i].price;
	// 添加到li中
	li.appendChild(sum);


	// 创建操作div节点
	var operation = document.createElement("div");
	// 添加到li中
	li.appendChild(operation);


	// 创建移入span节点
	var move = document.createElement("span");
	//添加内容
	move.innerHTML = "移入收藏夹";
	// 添加到操作operation中
	operation.appendChild(move);

	// 创建换行节点
	var br = document.createElement("br");
	// 添加到操作operation中
	operation.appendChild(br);

	// 创建删除节点
	var remove = document.createElement("span");
	//添加内容
	remove.innerHTML = "删除";
	// 添加到操作operation中
	operation.appendChild(remove);

	//**************************************************************

	// 单行删除
	remove.onclick = function() {
		this.parentNode.parentNode.remove();
		// console.log(123);
		//调用已选商品总数，合计金额函数
		fn();
	}
	
	// ***************************************************************************

	// 数量删除按钮单击事件
	rebtn.onclick = function() {
		//找数量
		var x = Number(this.nextSibling.value);
		//找单价
		var p = this.parentNode.previousSibling.innerHTML;
		// 截取到数字
		p = p.substr(1);

		if (x > 1) {
			x--;
			this.nextSibling.value = x;
			this.parentNode.nextSibling.innerHTML = "￥" + x * p;
		}
		
		//调用已选商品总数，合计金额函数
		fn();
	}
	// ***************************************************************************
	
	//数量添加按钮单击事件
	addbtn.onclick = function() {
		//找数量
		var x = Number(this.previousSibling.value);
		x++;
		this.previousSibling.value = x;
		//找单价
		var p = this.parentNode.previousSibling.innerHTML;
		// 截取到数字
		p = p.substr(1);
		// 验证
		// console.log("p=" + p);
		// 将金额赋值为单价*数量
		this.parentNode.nextSibling.innerHTML = "￥" + x * p;
		// console.log("s="+s);
		//调用已选商品总数，合计金额函数
		fn();
	}

效果图
在这里插入图片描述

效果展示
在这里插入图片描述

全选事件

获取全选按钮

//获取店铺全选按钮
var chall1 = document.getElementById("chall1");
var chall2 = document.getElementById("chall2");

获取商品多选框

//获取商品多选框的元素
var commodity = document.getElementsByClassName("commodity");

全选按钮点击事件

//全选按钮点击事件
chall1.onclick = chall2.onclick = function() {
	//设置同时选中同时取消
	if (this == chall1) {
		chall2.checked = chall1.checked;
	} else {
		chall1.checked = chall2.checked;
	}

	//选中全部商品
	for (var i = 0; i < commodity.length; i++) {
		commodity[i].checked = chall1.checked;
	}

	//调用已选商品总数，合计金额函数
	fn();
}

多选框全部选取时，多选按钮亮起

//选中全部商品时，全选按钮亮起
// 循环添加点击事件
for (var i = 0; i < commodity.length; i++) {
	commodity[i].onclick = function() {
		//计数变量,每次点击多选框都需要重新计数
		var n = 0;
		// 循环遍历多选框
		for (var j = 0; j < commodity.length; j++) {
			// 判断如果选中多选框则计数变量+1
			if (commodity[j].checked) {
				// 点击后计数变量+1
				n++;
			}
		}
		console.log("n=" + n)
		// 判断计数变量是否与多选框的数量相等
		if (n == commodity.length) {
			chall1.checked = chall2.checked = true;
		} else {
			chall1.checked = chall2.checked = false;
		}

		//调用已选商品总数，合计金额函数
		fn();
	}
}

效果展示：
在这里插入图片描述

批量删除事件

// 删除选中商品
// 获取多个删除按钮元素
var del = document.getElementById("del");
del.onclick = function() {
	// 循环遍历所有的多选框元素
	for (var i = 0; i < commodity.length; i++) {
		// 判断多选框是否选中
		if (commodity[i].checked) {
			commodity[i].parentNode.parentNode.remove();
			i--;
		}
		//调用已选商品总数，合计金额函数
		fn();
	}
}

在这里插入图片描述

已选商品的数量、金额。
在数量增加、数量减少、删除时都调用该函数。

// 已选商品数量,总金额
function fn() {
	// 获取已选商品总数元素
	var senum = document.getElementById("senum");
	// 已选商品合计金额
	var allsum = document.getElementById("allsum");

	// 获取已选商品
	var commodity = document.getElementsByClassName("commodity");
	//获取已选商品的价格
	var sum = ul.getElementsByClassName("sum");
	
	// 获取已选商品数量
	var num = document.getElementsByClassName("num");
	var n = 0;
	var s = 0;
	for (var i = 0; i < commodity.length; i++) {
		if (commodity[i].checked) {
			n++;
			s += Number(sum[i].innerHTML.substr(1));
		}
	}
	//已选商品总数
	senum.innerHTML = n;
	// 已选商品合计金额
	allsum.innerHTML = "￥"+s;
}