程序员最近都爱上了这个网站  程序员们快来瞅瞅吧!  it98k网:it98k.com

本站消息

站长简介/公众号

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

简易购物车

发布于2021-04-09 06:59     阅读(125)     评论(0)     点赞(2)     收藏(1)


js实现简单的购物车功能

1.设计目标

在这里插入图片描述

2.设计思路

1.搭建好基础的UI界面;

2.从输入框中获取值,然后再在表格中进行添加;

​ ①首先要为新增按钮绑定添加事件;

​ ②向表格中添加的时候还需要考虑表格中是否存在同名元素;

​ i.当表格为空时,肯定没有同名元素可以直接添加。

​ ii.当表格中有数据的时候,我们需要先判断是否有同名元素;

​ 如果有的话。数量进行累加,同时还要修改价格(防止价格变动),和总价;

​ 如果没有同名元素的话,也可以直接进行添加;

​ ③要想获取到表格中的元素,需要向表格中的标签添加id属性,以方便获取值;

3.为加、减、删除和checkbox绑定事件;

​ ①+ 按钮 当点击了之后数量进行加一,总价也会随着一起改变;如果—号按钮属于不可用的状态,则恢复可以点击的状态;

​ ②- 按钮 当点击了之后数量进行减一,总价也会改变;如果数量为0的时候,则不可以再减了。减号按钮变为失效状态

​ ③删除按钮 点击之后删除所有的选中的商品信息;操作中的删除按钮则会删除自己所在的商品信息;

​ ④checkbox绑定事件:

​ i.如果全部选中的话则全部框也会选中

​ ii.如果选中全部选中框,全选时会全部选中,否则则会全部不选中。

4.计算总价;

3.开始设计

3.1搭建UI界面

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			fieldset{
				width: 800px;
				margin: auto;
			}
			table{
				width: 800px;
			}
		</style>
	</head>
	<body>
		<fieldset id="">
			<legend>购物车</legend>
			<div>
				品类:<input type="text"/>
				价格:<input type="text"/>
				数量:<input type="text"/>
				<br/>
				<button type="button">新增</button>
				<button type="button">删除</button>
			</div>
			<div id="">
				<table border="1px">
					<thead>
						<tr>
							<th>全选<input type="checkbox"/></th>
							<th>品类</th>
							<th>价格</th>
							<th>数量</th>
							<th>总价</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody></tbody>
				</table>
			</div>
			<div>
				总价:<span></span>
			</div>
		</fieldset>
	</body>
</html>

3.2从输入框中获取值,然后再在表格中进行添加;

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			fieldset{
				width: 800px;
				margin: auto;
			}
			table{
				width: 800px;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<fieldset id="">
			<legend>购物车</legend>
			<div>
				品类:<input type="text" id = "goodsName"/>
				价格:<input type="text" id = "goodsPrice"/>
				数量:<input type="text" id = "goodsNum"/>
				<br/>
				<button type="button" onclick="addGoodstd()">新增</button>
				<button type="button">删除</button>
			</div>
			<div id="">
				<table border="1px">
					<thead>
						<tr>
							<th>全选<input type="checkbox"/></th>
							<th>品类</th>
							<th>价格</th>
							<th>数量</th>
							<th>总价</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody id = "tbodyGoods">
						<!-- <tr>
							<td><input type="checkbox"/></td>
							<td>goodsName.value</td>
							<td>goodsPrice.value</td>
							<td><button type="button">+</button><input type="text" value="goodNum.value" /><button type="button">-</button></td>
							<td>goodsPrice.value*goodNum.value</td>
							<td><button type="button">删除</button></td>
						</tr> -->
					</tbody>
				</table>
			</div>
			<div>
				总价:<span></span>
			</div>
		</fieldset>
	</body>
	<script type="text/javascript">
		//“新增”按钮绑定事件判断表格中是否存在同名商品
		function addGoodstd(){
			var goodsNameArr = document.getElementsByClassName("goodsName");
			//创建一个判断器,当遍历中找到同名元素的时候,就改为true;
			var judge = false;
			// 当表格为空时,肯定没有同名元素可以直接添加。
			if(tbodyGoods.children.length==0){
				creationTd();
			} else{
				//如果有元素则进行遍历<tbody>的子代数组,
				//如果有同名商品则不进行添加,否则直接进行添加。
				//		如果再循环中添加,遍历每个元素都会添加一个表格,所以不能在循环中添加
				//这里直接获取tbody子代的标签中的商品名太麻烦,所以我们为商品名绑定类名
				// console.log("测试是否进入判断");
				for(var i = 0;i<tbodyGoods.children.length;i++){
					// console.log("测试是否进入循环");
					if(goodsNameArr[i].innerText==goodsName.value){
							 console.log("测试是否进入判断")
							 judge = true;
							//找到之后跳出循环,可以减少无效循环的时间
							 break;
					}
				}
				
				if(judge == false){
					//如果为false则不含同名元素 直接添加
					creationTd();
				} else{
					//如果含同名元素则修改价格,数量进行累加。变更总价
					//变更价格
					goodsNameArr[i].nextElementSibling.innerText = goodsPrice.value;
					//获取数量所在的节点
					var num = goodsNameArr[i].nextElementSibling.nextElementSibling.children[1];
					//数量进行变动
					num.value = Number(num.value) + Number(goodsNum.value);
					//变更总价
					goodsNameArr[i].parentNode.children[4].innerText = Number(num.value)*Number(goodsPrice.value);
				}
				
			}
			
		}
		// 像表格中添加元素的方法
		function creationTd(){
			//创建一个行标签 也可以全部用字符串拼接但是会产生一个bug(还没解决)所以就先创建一个行标签
			var goodsTb = document.createElement("tr");
			//创建字符串 并将第一个单元格的内容赋值给str
			var str = "<td><input type='checkbox'/></td>";
			//将第二个单元格的内容拼接进字符串 其中商品的名字通过id属性获取
			str += "<td class = 'goodsName'>"+goodsName.value+"</td>";
			//将第三个单元格的内容拼接进字符串 其中商品的价格通过id属性获取
			str += "<td>"+goodsPrice.value+"</td>";
			//将第四个单元格的内容拼接进字符串 其中商品的数量通过id属性获取
			str += "<td><button type='button'>+</button><input type='text' value='"+goodsNum.value+"' /><button type='button'>-</button></td>"
			//将第五个单元格的内容拼接进字符串 其中商品的总价通过计算获取
			str += "<td>"+goodsPrice.value*goodsNum.value+"</td>"
			//将第六个单元格的内容拼接进字符串
			str += "<td><button type='button'>删除</button></td>"
			// 将拼接好的单元格串插入行中
			goodsTb.innerHTML = str;
			// 将行元素添加到tbody中
			tbodyGoods.appendChild(goodsTb);
		}	
	</script>
</html>

3.3为加、减、删除和checkbox绑定事件 以及求和 完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			fieldset{
				width: 800px;
				margin: auto;
			}
			table{
				width: 800px;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<fieldset id="">
			<legend>购物车</legend>
			<div>
				品类:<input type="text" id = "goodsName"/>
				价格:<input type="text" id = "goodsPrice"/>
				数量:<input type="text" id = "goodsNum"/>
				<br/>
				<button type="button" onclick="addGoodstd()">新增</button>
				<button type="button" onclick="delPick()">删除</button>
			</div>
			<div id="">
				<table border="1px">
					<thead>
						<tr>
							<th>全选<input type="checkbox" id = "firstCheck" οnclick="checkAll()"/></th>
							<th>品类</th>
							<th>价格</th>
							<th>数量</th>
							<th>总价</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody id = "tbodyGoods">
						<!-- <tr>
							<td><input type="checkbox"/></td>
							<td>goodsName.value</td>
							<td>goodsPrice.value</td>
							<td><button type="button">+</button><input type="text" value="goodNum.value" /><button type="button">-</button></td>
							<td>goodsPrice.value*goodNum.value</td>
							<td><button type="button">删除</button></td>
						</tr> -->
					</tbody>
				</table>
			</div>
			<div>
				总价:<span id = "gSum"></span>
			</div>
		</fieldset>
	</body>
	<script type="text/javascript">
		//“新增”按钮绑定事件判断表格中是否存在同名商品
		function addGoodstd(){
			var goodsNameArr = document.getElementsByClassName("goodsName");
			//创建一个判断器,当遍历中找到同名元素的时候,就改为true;
			var judge = false;
			// 当表格为空时,肯定没有同名元素可以直接添加。
			if(tbodyGoods.children.length==0){
				creationTd();
				goodsSum()
			} else{
				//如果有元素则进行遍历<tbody>的子代数组,
				//如果有同名商品则不进行添加,否则直接进行添加。
				//		如果再循环中添加,遍历每个元素都会添加一个表格,所以不能在循环中添加
				//这里直接获取tbody子代的标签中的商品名太麻烦,所以我们为商品名绑定类名
				// console.log("测试是否进入判断");
				for(var i = 0;i<tbodyGoods.children.length;i++){
					// console.log("测试是否进入循环");
					if(goodsNameArr[i].innerText==goodsName.value){
							 // console.log("测试是否进入判断")
							 judge = true;
							//找到之后跳出循环,可以减少无效循环的时间
							 break;
					}
				}
				
				if(judge == false){
					//如果为false则不含同名元素 直接添加
					creationTd();
					goodsSum()
				} else{
					//如果含同名元素则修改价格,数量进行累加。变更总价
					//变更价格
					goodsNameArr[i].nextElementSibling.innerText = goodsPrice.value;
					//获取数量所在的节点
					var num = goodsNameArr[i].nextElementSibling.nextElementSibling.children[1];
					//数量进行变动
					num.value = Number(num.value) + Number(goodsNum.value);
					//变更总价
					goodsNameArr[i].parentNode.children[4].innerText = Number(num.value)*Number(goodsPrice.value);
					goodsSum()
				}
				
			}
			
		}
		// 像表格中添加元素的方法
		function creationTd(){
			//创建一个行标签 也可以全部用字符串拼接但是会产生一个bug(还没解决)所以就先创建一个行标签
			var goodsTb = document.createElement("tr");
			//创建字符串 并将第一个单元格的内容赋值给str
			var str = "<td><input type='checkbox' class = 'checkBox' οnclick='checkAg()'/></td>";
			//将第二个单元格的内容拼接进字符串 其中商品的名字通过id属性获取
			str += "<td class = 'goodsName'>"+goodsName.value+"</td>";
			//将第三个单元格的内容拼接进字符串 其中商品的价格通过id属性获取
			str += "<td>"+goodsPrice.value+"</td>";
			//将第四个单元格的内容拼接进字符串 其中商品的数量通过id属性获取
			str += "<td><button type='button' onclick = 'addGoodsNum(this)'>+</button><input type='text' value='"+goodsNum.value+"' /><button type='button' onclick = 'minusGoodsNum(this)'>-</button></td>"
			//将第五个单元格的内容拼接进字符串 其中商品的总价通过计算获取
			str += "<td class = 'sum'>"+goodsPrice.value*goodsNum.value+"</td>"
			//将第六个单元格的内容拼接进字符串
			str += "<td><button type='button' onclick = 'delTb(this)'>删除</button></td>"
			// 将拼接好的单元格串插入行中
			goodsTb.innerHTML = str;
			// 将行元素添加到tbody中
			tbodyGoods.appendChild(goodsTb);
		}
		//点击加号的时候进行数量加以操作
		function addGoodsNum(addbtn){
			//数量进行累加
			addbtn.nextElementSibling.value++;
			//总价重新计算
			addbtn.parentNode.nextElementSibling.innerText = Number(addbtn.nextElementSibling.value)*Number(addbtn.parentNode.previousElementSibling.innerText);
			//让减号按钮可以使用
			addbtn.nextElementSibling.nextElementSibling.disabled = false;	
			goodsSum()
		}
		//点击减号的时候进行数量递减操作
		function minusGoodsNum(minubtn){
			//对商品的数量进行判断
			if(minubtn.previousElementSibling.value>0){
				//数量进行递减
				minubtn.previousElementSibling.value--;
				//总价重新计算
				minubtn.parentNode.nextElementSibling.innerText = Number(minubtn.previousElementSibling.value)*Number(minubtn.parentNode.previousElementSibling.innerText);
				goodsSum()
			} else{
				//让减号按钮不可以使用
				minubtn.disabled = true;
			}
		}
		//单元格中的删除
		function delTb(delbtn){
			//寻找当前节点的父节点的父节点然后移除
			delbtn.parentNode.parentNode.remove();
			goodsSum();
		}
		//总体的删除
		// 需要对checkbox进行类名绑定,然后检查它的状态
		//如果是选中状态则删除
		function delPick(){
			//获取表格中所有的选中标签
			var checkBoxArr = document.getElementsByClassName("checkBox");
			//遍历这些表格中选中框 检查是否选中 应为document.getElementsByClassName是动态获取,所以要从后往前删
			for(var i = checkBoxArr.length-1;i >=0 ;i--){
				//判断选中框是否被选中
				if(checkBoxArr[i].checked == true){
					checkBoxArr[i].parentNode.parentNode.remove();
				}
			}
			goodsSum();
		}
		//反选方法 将反选方法绑定再表格添加的选择框中
		function checkAg(){
			//获取表格中所有的选中标签
			var checkBoxArr = document.getElementsByClassName("checkBox");
			//设置判断器
			var judge = true;
			// 遍历这些表格中选中框
			for(var i = checkBoxArr.length-1;i >=0 ;i--){
				//判断选中框是否被选中
				if(checkBoxArr[i].checked == false){
					//如果有一个没有选中则判断器为false;
					judge = false;
					//结束当前循环
					break;
				}
			}
			
			if(judge == true){
				//如果表格中的选中框全部选中则全部的选择框也选择
				firstCheck.checked = true;
			} else{
				//如果表格中的选中框没有全部选中则全部的选择框呈现不被选择状态
				firstCheck.checked = false;
			}
			goodsSum();
			
		}
		//全选方法;将其绑定在第一个选择框中
		function checkAll(){
			var checkBoxArr = document.getElementsByClassName("checkBox");
			for(var i = checkBoxArr.length-1;i >=0 ;i--){
				//将全选框的状态赋值给选择框  2021/4/7  优化
				checkBoxArr[i].checke = firstCheck.checked ;
				//判断选中框是否被选中
				//if(firstCheck.checked == true){
					//如果有一个没有选中则判断器为false;
				//	checkBoxArr[i].checked = true;
					//结束当前循环
			//	} else{
					//checkBoxArr[i].checked = false;
			//	}
			}
			goodsSum();
		}
		//计算总价
		function goodsSum(){
			var sumArr = document.getElementsByClassName("sum");
			var sum = 0;
			for(var i=0;i<sumArr.length;i++){
				sum+=Number(sumArr[i].innerText);
			}
			gSum.innerText = sum;
		}
	</script>
</html>



原文链接:https://blog.csdn.net/qq_41135146/article/details/115473256




所属网站分类: 技术文章 > 博客

作者:听说你混的不错

链接:http://www.qianduanheidong.com/blog/article/58491/6c3ed351c35a3ce825f5/

来源:前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

2 0
收藏该文
已收藏

评论内容:(最多支持255个字符)