JS实现购物车功能

最新推荐文章于 2024-09-28 23:02:25 发布

陈使劲敲代码

最新推荐文章于 2024-09-28 23:02:25 发布

阅读量9.4k

点赞数 21

文章标签： javascript 前端

本文链接：https://blog.csdn.net/qq_46362763/article/details/123558134

版权

在整个前端中，JS实现购物车基本功能算是一个经典案例，今天把它整理出来，需要的小伙伴可以参考一下。

该案例的购物车主要功能如下：
1、商品单选、全选、反选功能
2、商品价格自动计算

直接上代码！

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table border="1" cellspacing="0" cellpadding="0">
			<tr>
				<th><input type="checkbox" id="all" /></th>
				<th>名称</th>
				<th>价格</th>
				<th>数量</th>
				<th>小计</th>
				<th>操作</th>
			</tr>
			<tr>
				<td><input type="checkbox" /></td>
				<td>键盘</td>
				<td>500</td>
				<td>
					<button type="button" onclick="minus(this)">-</button>
					<input type="text" value="1" />
					<button type="button" onclick="add(this)">+</button>
				</td>
				<td>500</td>
				<td><button type="button">删除</button></td>
			</tr>
			<tr>
				<td><input type="checkbox" /></td>
				<td>鼠标</td>
				<td>100</td>
				<td>
					<button type="button" onclick="minus(this)">-</button>
					<input type="text" value="1" />
					<button type="button" onclick="add(this)">+</button>
				</td>
				<td>100</td>
				<td><button type="button">删除</button></td>
			</tr>
			<tr>
				<td colspan="3">总计</td>
				<td colspan="3" id="sum"></td>
			</tr>
		</table>
	</body>
	<script type="text/javascript">
	/* 思路：1、首先通过点击加减按钮，实现input框内数值的加减变化
		2、其次要实现复选框checkbox反选和全选
		3、最后通过复选框的勾选，以及按钮的加减，获取总计 */
		
		//第一步
		//购物车增加数量
		function add(btn) {
				//数量*价格
				//1、获取到当前input框数值，并更新input框
				//parentElement:获取父节点	children:获取子节点
			var num=btn.parentElement.children[1].value;
				//parentElement:获取父节点	children:获取子节点
			btn.parentElement.children[1].value=++num;
				//2、获取单价,字符串
				//parentElement:获取父节点		//previousElementSibling：获取哥哥节点
			var proce=btn.parentElement.previousElementSibling.innerText;
				//3、计算小计，并更新渲染
			var total=parseFloat(proce)*num;
				//parentElement:获取父节点		nextElementSibling：获取弟弟节点
			btn.parentElement.nextElementSibling.innerText=total;
		
			//总计
			 calSum();
		}
		
		//购物车减少数量
		function minus(btn){
			//数量*价格
			//1、获取到当前input框数值，并更新input框
			//parentElement:获取父节点	children:获取子节点
			var num=btn.parentElement.children[1].value;
			//设置不能减到负数，到0就不能减
			if(num==0){
				return;
			}
			btn.parentElement.children[1].value=--num;
			//2、获取单价,字符串
			var price=btn.parentElement.previousElementSibling.innerText;
			//3、计算小计，并更新渲染
			var total=parseFloat(price)*num;
			btn.parentElement.nextElementSibling.innerText=total;
		
			//总计
			 calSum();
		}
		
		//第二步
		//全选和反选
		
		//选中全选框
			var _all=document.getElementById("all");
			var _sum=document.getElementById("sum");
		//选中除了全选的复选框
			var _boxes=document.querySelectorAll("input[type=checkbox]:not(#all)")
			//首先实现点击全选框之后，其他复选框会跟着被选中/反选
			_all.onclick=function(){
				// checked:获取被选中时的状态（当被选中时返回true，反之false）
				// this：当前的点击对象
				var status=this.checked;
				_boxes.forEach(function(tag){
					//复选框根全框选状态保持一致
					// tag:指_boxes内的每一项
					tag.checked=status;
				})
				
				//总计
				 calSum();
			}
			
			//其次点击复选框之后，实现全选框选中/反之不选中全选框
			_boxes.forEach(function(tag){
				//tag:指_boxes内的每一项
				tag.onclick=function(){
					//过滤出所有被选中的复选框
					// filter:返回所有符合条件的元素数组；
					var chs=Array.from(_boxes).filter(function(item){
						return item.checked==true;
					})
					// 如果过滤出所得选中的复选框长度等于所有复选框长度，说明全选
					_all.checked=chs.length===_boxes.length;
				
					//总计
					 calSum();
				}
			})
			
			//总计
			function  calSum(){
				var sum=0;		
				//newBoxes:指被选中的按钮
				// tag：俩按钮
				var newBoxes=Array.from(_boxes).filter(function(tag){
					return tag.checked==true;
				})
				
				//tag:被选中的按钮
				newBoxes.forEach(function(tag){
					sum+=parseFloat(tag.parentElement.parentElement.children[4].innerText)
				})
				
				_sum.innerText=sum;
			
			}
	</script>
</html>