js实现购物车基本功能

不要变成秃头懒羊羊

于 2024-05-28 18:30:26 发布

阅读量360

点赞数 5

本文链接：https://blog.csdn.net/m0_71606684/article/details/139274481

版权

js实现购物车加、减、单选、全选、删除、价格总汇、数量总汇；

代码如下：

body部分：

 <div class='cart'>
	 <!-- 头部 -->
		<div class='cart-head u-clearfix'>
			<div class='col col-check u-l'>
				<input type='checkbox' id='all' class='check'>
				<label for='all'>全选</label>
			</div>
			<div class='col col-img u-l'>&nbsp;</div>
			<div class='col col-name u-l'>商品名称</div>
			<div class='col col-price u-l'>单价</div>
			<div class='col col-num u-l'>数量</div>
			<div class='col col-sum u-l'>总额</div>
			<div class='col col-action u-r'>操作</div>
		</div>
			  
		<div class='cart-list'>
				  <div class='list-item'>
					  <!--商品快-->
					  <div class='item-box u-clearfix'>
						  <div class='col col-check u-l'>
						  	 <input type='checkbox' class='check single'>
						  </div>
						  <div class='col col-img u-l'><img src='img/14big.png'></div>
						  <div class='col col-name u-l'>小米14粉</div>
						  <div class='col col-price u-l'>3999</div>
						  <div class='col col-num u-l'>
							<div class='change-goods-num'>
								<a href='javascript:;;' class='reduce'>-</a>
								<input type='text' value='1'>
								<a href='javascript:;;' class='add'>+</a>
							</div>
						  </div>
						  <div class='col col-sum u-l'>3999</div>
						  <div class='col col-action u-r'>删除</div>
		</div>
					  
		<div class='item-box u-clearfix'>
		    <div class='col col-check u-l'>
				<input type='checkbox' class='check single'>
			</div>
			<div class='col col-img u-l'><img src='img/big1.png'></div>
			<div class='col col-name u-l'>小米14 Ultra</div>
			<div class='col col-price u-l'>6499</div>
			<div class='col col-num u-l'>
			<div class='change-goods-num'>
				<a href='javascript:;;' class='reduce'>-</a>
				<input type='text' value='1'>
			    <a href='javascript:;;' class='add'>+</a>
			</div>
		 </div>
		        <div class='col col-sum u-l'>6499</div>
				<div class='col col-action u-r'>删除</div>
		</div>
					  
		<div class='item-box u-clearfix'>
				 <div class='col col-check u-l'>
					  	 <input type='checkbox' class='check single'>
				</div>
				<div class='col col-img u-l'>
                    <img src="img/product_f灰.png"></div>
				<div class='col col-name u-l'>Redmi Pad SE</div>
				<div class='col col-price u-l'>1799</div>
			    <div class='col col-num u-l'>
			    <div class='change-goods-num'>
					  <a href='javascript:;;' class='reduce'>-</a>
					  	<input type='text' value='1'>
					      <a href='javascript:;;' class='add'>+</a>
				</div>
		</div>
				<div class='col col-sum u-l'>1799</div>
					  <div class='col col-action u-r'>删除</div>
					  </div>
					  <div class='item-box u-clearfix'>
					  		<div class='col col-check u-l'>
					  		<input type='checkbox' class='check single'>
					  						  </div>
			          <div class='col col-img u-l'><img src="img/product_e黑.png"></div>
					  <div class='col col-name u-l'>Xiaomi Buds 4 Pr</div>
					   <div class='col col-price u-l'>799</div>
					  		<div class='col col-num u-l'>
					  		<div class='change-goods-num'>
					  			<a href='javascript:;;' class='reduce'>-</a>
					  				<input type='text' value='1'>
					  					<a href='javascript:;;' class='add'>+</a>
					  		</div>
					  	</div>
					  		<div class='col col-sum u-l'>799</div>
					  		<div class='col col-action u-r'>删除</div>
					  </div>
					  
					  
				  </div>
			  </div>
			  
			  <div class='cart-foot'>
				  <div class='section-left u-l'>
					  <a href='product1.html'>继续购物</a>
					  <span>已选择<i id='totalNum'>0</i>件商品</span>
				  </div>
				  <div class='u-r settlement' onclick=money()>去结算</div>
				  <div class='u-r total-price'>合计：
					<em id='totalPrice'>0</em>元
				  </div>
			  </div>
			  
		  </div>

css:

/* <!--购物车样式--> */
.cart{
	margin:0 auto;
	width:1200px;
}
.cart-head{
	height:70px;
	line-height:70px;
}
.col{
	width:120px;
}
.col-name{
	width:360px;
}

.col-price{
	width:160px;
	padding-right: 18px;
	}
.col-num{
	width:150px;
	text-align: center;
}
.col-sum{
	text-align: center;
	color: #ff0000;
	}
.col-action{
	text-align: center;
}
/**/
.item-box{
	border-top:1px solid #ff0000;
	padding:20px 0;
}
.change-goods-num{
	width: 148px;
	height: 38px;
	border: 1px solid red;
	}
.change-goods-num a{
	float:left;	
	width:38px;
	height:38px;
	line-height: 38px;
	font-size: 20px;
	color:red;
	text-align: center;
	}
.change-goods-num input{
	float:left;	
	width:72px;
	height:38px;
	line-height: 38px;
	font-size: 18px;;
	border-width: 0;
	text-align: center;
	}
	
	/**/
	.cart-foot{
		height:50px;
		line-height: 50px;
		border:1px solid blue;
	}
	.section-left a{
		margin-left: 32px;
		color: #ff0000;
		}
		.section-left span{
			margin-left: 16px;
			padding-left: 16px;
			border-left: 1px solid pink;
		}
	.section-left span i{
		font-style:normal;
		color:orange;
	}
	.settlement{
		padding:0 40px;
		margin-left: 40px;
			font-size:18px;
			background:orange;
			color:white;
	}
	.total-price em{
		font-style: normal;
		font-size: 24px;
		color:orange;
		}

*{	
	margin: 0;
	padding: 0;
}
h1, h2, h3, h4, span,p,.icon,img{
	cursor: pointer;
}
ul{
	list-style: none;
}
a{
	text-decoration: none;
	color：#000；
}
.u-l{
	float: left;
}
.u-r{
	float: right;
}
.u-clearfix:after{
	content: '';
	clear: both; 
	display:block;
}

js:

// 全选、合计总额

//获取所有复选框
var check=document.querySelectorAll('.check');
var checkLen=check.length;
var single=document.querySelectorAll('.single');
var singleLen=single.length;

//
var itemBox=document.querySelectorAll('.item-box');
var itemBoxLen=itemBox.length


for(var i=0;i<check.length;i++){
	check[i].onclick=function(e){
		var count=0;
		
		if(e.target.getAttribute('id')=='all'){
			for(var j=0;j<single.length;j++){
				single[j].checked=this.checked;
				}
			
		}
		
		for(var k=0;k<singleLen;k++){
			if(single[k].checked){
				count++;
			}
			if(count==single.length){
				check[0].checked=true;
			}else{
				check[0].checked=false;
			}
		}
		
		
		fTotal();
	}
}
//增减
for(var i=0;i<itemBoxLen;i++){
	itemBox[i].onclick=function(e){
		var input=this.getElementsByTagName('input')[1];
		switch(e.target.className){
			case 'add':
			input.value=parseInt(input.value)+1;
			fTotalSum(this);
			break;
			case 'reduce':
			input.value=parseInt(input.value)-1<=1?1:parseInt(input.value)-1;
			fTotalSum(this);
			break;
			case 'col col-action u-r':
				var con=confirm("确定删除嘛");
				if(con){
					this.parentNode.removeChild(this);
				}
			break;
		}
		fTotal();
	}
	itemBox[i].onkeyup=function(e){
		fTotalSum(this);        //输入值计算和
		fTotal();
	}
}
//总金额
function fTotalSum(That){
	var num=That.getElementsByTagName('input')[1].value;
	var price=parseInt(That.querySelector('.col-price').innerHTML);
	That.querySelector('.col-sum').innerHTML=num*price;
}
//总数额
function fTotal(){
	var totalPrice=document.getElementById('totalPrice');
	var totalNum=document.getElementById('totalNum');
	var num=0;
	var price=0;
	var itemBox=document.querySelectorAll('.item-box');
	var itemBoxLen=itemBox.length;
	for(var i=0;i<itemBoxLen;i++){
		if(itemBox[i].getElementsByTagName('input')[0].checked){
			num +=parseInt(itemBox[i].getElementsByTagName('input')[1].value);
			price +=parseInt(itemBox[i].querySelector('.col-sum').innerHTML);
		}
	}
	totalNum.innerHTML=num;
	totalPrice.innerHTML=price;
	

}