web前端——购物车模拟

最新推荐文章于 2023-07-25 21:49:58 发布
最新推荐文章于 2023-07-25 21:49:58 发布
阅读量1.3k 收藏 54
点赞数 5
文章标签： html css js html5 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：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;
}

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

ZPD_zpd
关注
用前端知识做一个小项目——购物车
yeping_Jun的博客
10-26 1975
所用技术：html，css,javascript 实现效果： 基本思路： 1.将页面的每个部分都用div盒子装起来，整个页面用一个div盒子，里面再划分多个盒子。 2.添加css样式，使页面基本达到效果。 3.添加js代码，增加一些加减数量，全选，结算的功能。 效果实现： 一.将页面的每个部分都用div盒子装起来，整个页面用一个div盒子，里面再划分多个盒子，大概如此 画了其中一部分，每个方框都是一个div。 <body> <!--购物车--&gt.
记录遇到的web前端开发面试题（八股文）
热门推荐
qq_41347964的博客
04-20 1万+
文章目录前言一、javascript相关1.js的八个基本数据类型（高频）2.this的五种指向方式3.Function的call，apply和bind方法的区别？4.Promise，手写promise5.闭包6.原型链，作用域链与原型链的区别？7.继承与继承的五种实现方式8.深拷贝与浅拷贝的区别？（高频）9.事件委托10.var，const和let对比（高频）11.宏任务与微任务12.bind的实现方式13.eventloop，事件循环（超高频）14.new的过程，手动实现一个new方法15.0.1+0.
购物车前台页面
01-11
这是一个购物车前端的jsp界面，做购物的web项目的同学可以用来提升自己的前台页面，这个可以展示图片，增加商品金额
Web前端设计模式--购物车拖拽的实现...
weixin_30306905的博客
11-29 287
设计场景： Ben负责的书城网用户量不断增加，书城书籍的类型和数量也在不断扩大，这时候就有客户抱怨，说书城网站的购物车不够智能，体现在需点击图书项上的+号小标才能将它加入购物车，而且如果想要查看自己的购物车内容，还需点击页面购物车图标跳转到购物车内容列表去查看，这种跳转的效果相当糟糕，令一些老年客户抱怨不已，因为他们记忆力不佳，经常要返回查看自己买了什么... 设计...
Web前端-购物车商城
qq_52031408的博客
03-18 3769
Web前端－购物车商城
前端实现购物车功能
cyj0919的博客
04-06 706
【代码】前端实现购物车功能。
web前端期末大作业——基于HTML+CSS+JavaScript仿蘑菇街时尚服装购物商城
08-10
- **网页简介**：这份作品是基于HTML、CSS和JavaScript构建的一个模拟购物网站——蘑菇街时尚服装商城。该网站采用了DIV+CSS布局，旨在作为学生的期末大作业，不仅包含了丰富的页面设计，还通过色彩鲜明的配色方案和...
前端毕业设计——淘宝网
10-14
【前端毕业设计——淘宝网】项目是一个以Vue2.0和Vuex为核心技术构建的电商网站，旨在模拟淘宝网的基本功能。在这个项目中，开发者利用现代前端技术栈，实现了用户友好的界面和交互，以及一些关键的电商特性。以下是...
ASP源码课程设计——简易购物车
07-01
总之，ASP源码课程设计——简易购物车是一次全面的Web开发实战，涵盖了服务器端脚本、数据库交互、前端设计以及安全等多个方面的知识，对于提升Web开发技能大有裨益。通过这个项目，学习者不仅能掌握ASP编程，还能...
2022最新Web前端经典面试试题及答案-史上最全前端面试题(含答案)
qq_46416934的博客
07-28 636
JS是单线程模型，只能通过这种多进程的方式提高性能）使用ParallelUglifyPlugin开启多进程压缩JS文件（使用UglifyJS插件压缩JS代码时，需要先将代码解析成Object表示的AST（抽象语法树），再去应用各种规则去分析和处理AST，所以这个过程计算量大耗时较多。ParallelUglifyPlugin可以开启多个子进程，每个子进程使用UglifyJS压缩代码，可以并行执行，能显著缩短压缩时间）...
购物车前端开发（jQuery和bootstrap3）
11-23
作为一名不在软件公司工作的软件工程师，不仅要会写后台代码(PHP/JAVA/SQL…)，还是兼顾前端工程师的工作(html/javascript/css…)。下面就来分享一个在实际工作项目中使用到的购物车的前端开发。 这里分享的仅仅是针对购物车的操作(产品数量的增加减少，删除购物车中产品项)，假设购物车中已经放有若干产品。闲话少说，先上两张效果图。 HTML代码如下：这里使用到了JQuery1.11和bootstrap3 。 <!DOCTYPE html> <html> <meta charset="UTF-8"> <title>Shopping Cart</titl
cart.html购物车前端实现
02-19
购物车前端js代码实现 自动实现结算价格等的计算 传递数据到后台 相关ajax后台传递
web前端做的一个购物商城
04-22
里面有登录注册页面，个人中心页面，购物车页面，实现搜索功能，欢迎下载
javaweb简易购物车设计
12-26
主要针对于针对于初学javaweb的人，代码简单易懂。
纯JS实现前端购物车案例.rar
04-08
购物车案例功能介绍：1、添加购物车，清单库存数量会对应减少，库存不足会警告；2、从购物车删除，库存将返回清单，总价相应变化；3、点击"-"，数量会返回到清单库存；4、点击"+"，清单中库存会减少，库存不足会警告；5、勾选或取消勾选商品总价会相应变化；6、总价默认计算被选中的商品，添加商品到购物车时默认被选中；7、可以进行全选和反选，并一键删除，库存返回清单，总价改变。
【前端】vue阶段案例：购物车
karshey的博客
10-23 965
案例
前端实现购物车，创建订单和支付流程
最新发布
m0_46631458的博客
07-25 2172
可以为购物车页面添加一些交互功能，比如点击商品列表中的某个商品可以跳转到商品详情页，点击加入购物车按钮可以将商品添加到购物车等。显示勾选的购物车数据：前端页面需要获取用户选择的商品信息，并将其展示在订单页面上，包括商品名称、价格、数量等信息。后端接收到支付请求后，根据订单信息调用相应的支付接口，获取支付链接或二维码等支付凭证，并将其返回给前端。用户点击支付按钮后，前端向后端发送支付请求，传递支付所需的参数，如订单信息、支付金额等。前端可以在支付完成的回调函数中处理支付结果，如展示支付成功或失败的提示信息。
前端场景3__购物车实例
qq_43137001的博客
12-06 144
总价格随着选择商品、商品数量改变。即选择框的选中状态，商品数量的加减都可能导致总价格的变化。 每个选择框的点击、每个加减按钮的点击都将触发总价格的重新计算。
电商前台项目（五）：完成加入购物车功能和购物车页面
weixin_42044763的博客
01-30 5894
这里要注意，这个项目的接口给的都是params参数，而使用axios发请求，params参数只能拼接在url地址中，而query参数的配置项叫params，很奇怪。3、如果不写返回值，且await后是失败的Promise，那么就会抛出异常，既然抛出异常，那么async函数返回的就是一个失败的Promise。中遍历购物车数据并派发请求，（当然其实在组件中写也一样，就是这样规范点），用try-catch捕获，如果都请求成功，那么就使用。4、如果不写返回值，且await后是成功的Promise，那么就会返回。
农产品购物车的Web前端课程设计实施
资源摘要信息:"web前端课程设计-农产品购物车" 在现代信息技术领域中，前端开发作为构建用户界面和用户体验的关键环节，对于网站和应用的交互性和视觉表现承担着重要角色。在给定的文件信息中，涉及了一个具体的web...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值