js代码实现购物车功能

最新推荐文章于 2024-07-03 16:18:51 发布

逗逗转转

最新推荐文章于 2024-07-03 16:18:51 发布

阅读量6.9k

点赞数 1

本文链接：https://blog.csdn.net/weixin_44388672/article/details/89216241

版权

@购物车
效果图


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		
		<style>
			body,p,ol,ul,li,h1,h2,h3,h4,h5,h6,form,
			table,td,th,dl,dt,dd,fieldset,legend,input{
				margin:0;
				padding:0;
			}
			a{
				text-decoration: none;
			}
			body{
				padding-left: 14px;
				padding-right:38px;
			}
			/*header*/
			header{
				position: relative;
				width: 100%;
				height: 40px;
			}
			
			header p {
				font-weight: bold;
				font-size:21px;
				margin-bottom: 20PX;
				text-align: left;	
			}
			
			   .priceTite{
			   	font-size: 12px;
			   	color: #4c4c4c;
			   	position: absolute;
			   	right: 280px;
			   	bottom:0px;
			   }
			
			   .countTite{
			   	font-size: 12px;
			   	color: #4c4c4c;
			   	position: absolute;
			   	right: 30px;
			   	bottom:0px;
			   }
			
			
			table{
				border-collapse: collapse;
				width: 100%;
			}
			tr{
				border-top: 1px solid #ddd;
				border-bottom:1px solid #ddd;
				padding:10px;
				opacity: .9;
			}
			
			td{
				padding: 10px;
				font-size: 12px;
			}
			img{
				width:150px;
			}
			.infon{
				width: 450px;
				font-size: 12px;
				line-height: 20px;
			}
			
			.infon .name{
				font-size: 16px;
				color:#375d8a;
				font-weight: bold;
			}
			
			.infon .name span{
				font-size: 12px;
				color:#0f171a;
				font-weight: normal;
			}
			
			.infon .style{
				color:#8e8d88;
			}
			
			.infon .sendTime{
				color: #a95d2c;
			}
			
			.price{
				color:#a11d00;
				font-weight: bold;
				width: 200px;
				font-size:16px;
				vertical-align: middle;
			}
			
			.btnCount{
				width: 60px;
				height: 20px;
				padding-left:10px;
				background-color: #eff0f2;
				border:1px solid gray;
				border-radius: 2px;
			}
			#total{
				float:right;
				font-weight: bold;
				height: 50px;
				line-height: 50px;
			}
			
			#totalMoneyS{
				color:#a11d00;
			}
			
		</style>
			</head>
	<body>
		<header>	
			<p class="title">购物车</p>
			<span class="priceTite">价格</span>
			<span class="countTite">数量</span>
		</header>
		<table id="t">
			 <tr>
			 	<td class="pic"><img src="../img/0.jpg"></td>
			 	<td class="infon">
			 		<p class="name">成果管理（珍藏版）<span>彼得.德鲁克(peter F.Durcker)</span></p>
			 		<p class="style">平装</p>
			 		<p class="sendTime">通常需要1-2个月发货</p>
			 		<p class="sendPrice">此商品享受免费配送</p>
			 		<p><a class="delete" href="#">删除</a>|<a href="#">移入收藏夹</a></p>	
			 	</td>
			 	<td class="price">￥<span>37.30</span></td>
			 	<td class="count"><input class="btnCount" type="number" value="1" min="0"></td>
			 </tr>
		
		
			 <tr>
			 	<td class="pic"><img src="../img/0.jpg"></td>
			 	<td class="infon">
			 		<p class="name">创新与企业家精神（珍藏版）<span>彼得.德鲁克(peter F.Durcker)</span></p>
			 		<p class="style">平装</p>
			 		<p class="sendTime" style="color:#366c32;">现在有货</p>
			 		<p class="sendPrice">此商品享受免费配送</p>
			 		<p><a class="delete" href="#">删除</a>|<a href="#">移入收藏夹</a></p>	
			 	</td>
			 	<td class="price">￥<span>39.80</span></td>
			 	<td class="count"><input class="btnCount" type="number" value="1" min="0"></td>
			 </tr>
		</table>
		     <p id="total">小计（<span id="totalCount">2</span>件商品）<span id="totalMoneyS">￥<span id="totalMoney">77.10</span></span></p>
		</body>
</html>
<script type="text/javascript">
	// 计算总金额,总数量
	let btnCount=$(".btnCount");
	var t=$("#t");
	function  calTotalMoney(){
		let totalMoney=0;
		let totalCount=0;
		let price=$(".price");
		for(let i=0;i<btnCount.length;i++){
			totalMoney += parseInt(btnCount[i].value)*parseFloat(price[i].firstElementChild.innerHTML);
			totalCount += parseInt(btnCount[i].value);
		}
		$("#totalMoney").innerHTML=totalMoney.toFixed(2);
		$("#totalCount").innerHTML=totalCount;
	}
	for(let i=0;i<btnCount.length;i++){
		btnCount[i].function(){
			calTotalMoney();
		}
		
	}
	// 删除商品
	function deleteGoods(num,node){
			for(let i=0;i<=t.rows[num].cells.length;i++){
				t.rows[num].deleteCell(0);
			}
		t.rows[num].cells[0].colSpan="4";
		t.rows[num].cells[0].innerHTML='<a href="#">'+node.parentNode.parentNode.firstElementChild.innerText+"</a>"+"从购物车成功删除。";
		
		calTotalMoney();
	}
	let deletes=$(".delete");
	for(let i=0;i<deletes.length;i++){
		this.index=i;
		deletes[i].function(){
			if(confirm("确认要删除吗?")){
					deleteGoods(i,this);
			}
		}
	}
	
	function $(str){
		if(str.charAt(0)=="#"){
			return document.getElementById(str.substring(1));
		}else if(str.charAt(0)=="."){
			return document.getElementsByClassName(str.substring(1));
		}else{
			return document.getElementsByTagName(str);
		}
	}

</script>