纯js写的购物车_function cart(obj) { this.items = []; var find = n-CSDN博客

本文链接：https://blog.csdn.net/qq_41422208/article/details/89540864
<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<script src="js/mui.min.js"></script>
	<link href="css/mui.min.css" rel="stylesheet"/>
	<link href="css/reset.css" rel="stylesheet"/>
	<style>
		.cart-page{
			min-height: 100%;
		}
		header{
			line-height: 50px;
			background: #000000;
			color: #fff;
			font-size: 16px;
			text-align: center;
			position: relative;
		}
		.btn-redact{
			position: absolute;
			right: 15px;
			top: 0;
			color: #ffffff;
		}
		li{
			margin-bottom: 10px;
			padding: 5px 0;
			background: #FFFFFF;
			border-bottom: 1px solid #e5e5e5;
		}
		label{
			display: block;
		}
		
		li .content{
			height: 70px;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			flex: 1;
			margin-left: 8px;
		}
		li .mui-checkbox.mui-left{
			
			padding-left: 58px;
			padding-right: 15px;
			box-sizing: border-box;
		}
		li .mui-checkbox.mui-left  input{
			top: 21px;
		}
		li button{
			width: 30px;
			height: 30px;
		}
		.mui-bar-tab{
			line-height: 50px;
		}
		.mui-bar-tab input{
			width: 28px;
			height: 28px;
		}
		.mui-bar-tab .mui-input-row input{
			top: 10px;
		}
		.mui-bar-tab .mui-btn{
			position: absolute;
			right: 15px;
		}
		.space-between{
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 30px;
		}
		.btn-box{
			text-align: center;
			height: 30px;
			width: 68px;
		}
		.btn-box span{
			margin: 0 auto;
		}
		.btn-box .btn{
			display: none;
		}
		.alian {
			display: flex;
			align-items: center;
		}
	</style>
</head>
<body>
	<div class="cart-page">
		<header> 购物车 <p class="btn-redact">完成</p></header>
		<ul class="cart-list">
			<li>
				<div class="mui-input-row mui-checkbox mui-left list-input">
					<div class="alian">
						<img src="images/icon.png" alt="" width="70" height="70">
						<div class="content">
							<p>中华人民共和国</p>
							<div class="space-between">
								<span class="money">500</span> 
								<p class="alian btn-box">	
									<button type="button" class="btn">-</button>
									<span class="number">1</span>
									<button type="button"  class="btn">+</button>
								</p>
							</div>
						</div>
					</div>
				  <input name="checkbox1" value="Item 1" type="checkbox" class="input">
				</div>
			</li>
			<li>
				<div class="mui-input-row mui-checkbox mui-left list-input">
					<div class="alian">
						<img src="images/icon.png" alt="" width="70" height="70">
						<div class="content">
							<p>中华人民共和国</p>
							<div class="space-between">
								<span class="money">500</span> 
								<p class="alian btn-box">	
									<button type="button" class="btn">-</button>
									<span class="number">1</span>
									<button type="button"  class="btn">+</button>
								</p>
							</div>
						</div>
					</div>
				  <input name="checkbox1" value="Item 1" type="checkbox" class="input">
				</div>
			</li>
		</ul>
		<div class="mui-bar mui-bar-tab alian">
			<div class="mui-input-row mui-checkbox mui-left">
			  <label>全选</label>
			  <input name="checkbox1" value="Item 1" type="checkbox" class="check-all">
			</div>
			<div class="alian">
				<span>合计:</span>
				<span class="sum">0 </span>  &nbsp;  &nbsp;
				<span class="total">0</span>
			</div>
			<button type="button" class="mui-btn mui-btn-danger">提交</button>
		</div>
	</div>
	
	<script type="text/javascript">
		var listInput = document.getElementsByClassName("list-input");
		var selectInputs = document.getElementsByClassName("input");
		var number = document.getElementsByClassName("number");
		var btn = document.getElementsByClassName("btn");
		var btnRedact = document.getElementsByClassName("btn-redact")[0];
		var money = document.getElementsByClassName("money");
		var sum = document.getElementsByClassName("sum")[0];
		var total = document.getElementsByClassName("total")[0];
		var checkAllInputs = document.getElementsByClassName("check-all")[0];
		var n2 = 1;
		var othercheckbox = 0;
		// 点击选择框
        for(var i = 0; i < selectInputs.length; i++ ){
			selectInputs[i].onclick = function () {
                if (this.checked == true) {
					othercheckbox++;
				} else {
					othercheckbox--;
				}			
				if (othercheckbox == selectInputs.length) {
					checkAllInputs.checked = true;
				} else {
					checkAllInputs.checked = false;
				}
				changeTotal() 
            }
        }
		// 全选
		checkAllInputs.onclick = function() {
			if (this.checked) {
				for(var i = 0; i < selectInputs.length; i++ ){
				    selectInputs[i].checked = true;
				}
			} else {
				for(var i = 0; i < selectInputs.length; i++ ){
				    selectInputs[i].checked = false;
				}
			}
		}
		// 总计价格和数量
		function changeTotal() {
			var sumNUM = 0  
			var sumTOTAL =0  
			 for(var i = 0; i < selectInputs.length; i++ ){
				 if(selectInputs[i].checked) {
					sumTOTAL += parseInt(money[i].innerHTML) * parseInt(number[i].innerHTML)
					sumNUM += parseInt(number[i].innerHTML)
				 }
			 }
			 total.innerHTML = sumTOTAL;
			 sum.innerHTML = sumNUM;
		}
		// 锁定点击的是哪一个list
		for (var i =0; i < listInput.length; i++) {
			cart(listInput[i]) 
		}
		// 点击添加商品数量
		function cart(obj) {
			var btn = obj.getElementsByClassName("btn");
			var listNumber = obj.getElementsByClassName("number")[0];
			var listMoney = obj.getElementsByClassName("money")[0];
			var n1=parseInt(listNumber.innerHTML);//商品的数量
			for (var i =0; i < btn.length; i++) {
				btn[i].onclick = function() {
					if(this.innerHTML == '+') {
						n1++;
					} else {
						n1--;
					}
					listNumber.innerHTML = n1 <= 1 ? n1 = 1 : n1;
					changeTotal()
				}
			}
		}
		
		// 点击完成
		btnRedact.onclick = function() {
			if (n2 == 1) {
				this.innerHTML = '编辑';
				for (var i = 0; i < btn.length; i++) {
					btn[i].style.display = 'block';
				}
				n2 = 2
			} else {
				this.innerHTML = '完成';
				for (var i = 0; i < btn.length; i++) {
					btn[i].style.display = 'none';
				}
				n2 = 1
			}
		}
		
	</script>
</body>
</html>