JS 使用节点实现简单购物车数量和金额_web前端用js进阶遍历制作购物车总数量-CSDN博客

本文链接：https://blog.csdn.net/hlx20080808/article/details/108060265

一、购物车中商品数量

二、计算金额

HTML页面:

<html>
	<head>
		<meta charset="UTF-8">
		<title>购物车</title>
		<link rel="stylesheet" type="text/css" href="css/car.css" />
	</head>
	<body>
		<div align="center">
			<table>
				<tr>
					<td>序号</td>
					<td>商品名称</td>
					<td>数量</td>
					<td>单价</td>
					<td>小计</td>
				</tr>
				<tr>
					<td>1</td>
					<td>羊肉串</td>
					<td>
						<input type="button" value="-" class="minus">
						<input type="text" name="" id="" value="1" disabled="disabled" />
						<input type="button" value="+" class="add">
					</td>
					<td>5.00</td>
					<td class="total">5.00</td>
				</tr>
				<tr>
					<td>2</td>
					<td>草莓奶茶</td>
					<td>
						<input type="button" value="-" class="minus">
						<input type="text" name="" id="" value="1" disabled="disabled" />
						<input type="button" value="+" class="add">
					</td>
					<td>9.00</td>
					<td class="total">9.00</td>
				</tr>
				<tr>
					<td>3</td>
					<td>饼干</td>
					<td>
						<input type="button" value="-" class="minus">
						<input type="text" name="" id="" value="1" disabled="disabled" />
						<input type="button" value="+" class="add">
					</td>
					<td>20.10</td>
					<td class="total">20.10</td>
				</tr>
				<tr>
					<td>4</td>
					<td>葡萄</td>
					<td>
						<input type="button" value="-" class="minus">
						<input type="text" name="" id="" value="1" disabled="disabled" />
						<input type="button" value="+" class="add">
					</td>
					<td>8.05</td>
					<td class="total">8.05</td>
				</tr>
				<tr>
					<td colspan="5">
						共计消费:￥<span id="sum2">42.15</span> 元</td>
				</tr>
			</table>
		</div>
	</body>

</html>

<script src="js/car.js" type="text/javascript" charset="utf-8"></script>

JS脚本

//add +
var adds = document.getElementsByClassName("add");
//循环
for (var i = 0; i < adds.length; i++) {
	//单击事件
	adds[i].onclick = function() {
		//1.获得输入框对象
		var inputEle = this.previousElementSibling;
		//2.获得原来的值
		var inputValue = inputEle.value;
		//3.重新复制
		inputEle.value = parseInt(inputValue) + 1;
		
		//计算金额
		 //1.数量
		 var number=parseInt(inputEle.value);
		 //2.单价
		  var price =parseFloat(this.parentNode.nextElementSibling.innerHTML);
		  //3.金额
		  var sum  =number*price;
		  
		  //4. 赋值  保留2位小数点==>  toFixed(2)
		  this.parentNode.nextElementSibling.nextElementSibling.innerHTML=sum.toFixed(2);
		
		 //调用方法
		 getAmount();
	}
}


//minus -
var minus = document.getElementsByClassName("minus");
//循环
for (var i = 0; i < minus.length; i++) {
	//单击事件
	minus[i].onclick = function() {
		//1.获得输入框对象
		var inputEle = this.nextElementSibling;
		//2.获得原来的值
		var inputValue = inputEle.value;
		//判断
		if (parseInt(inputValue) > 1) {
			//3.重新复制
			inputEle.value = parseInt(inputValue) - 1;
			
			//计算金额
			 //1.数量
			 var number=parseInt(inputEle.value);
			 //2.单价
			  var price =parseFloat(this.parentNode.nextElementSibling.innerHTML);
			  //3.金额
			  var sum  =number*price;
			  
			  //4. 赋值  保留2位小数点==>  toFixed(2)
			  this.parentNode.nextElementSibling.nextElementSibling.innerHTML=sum.toFixed(2);
			
			//调用方法
			 getAmount();
			
		}else{
			alert("不能再减了!");
		}
	}
}

//计算总金额
function getAmount(){
	//0.累计和
	 var sum=0;
	//1.total
	var totals = document.getElementsByClassName("total");
	//2.循环
	for (var i = 0; i < totals.length; i++) {
		 sum+=parseFloat( totals[i].innerHTML);
	}
	
	//3.赋值
	document.getElementById("sum2").innerHTML=sum.toFixed(2);
}