类似购物车的计算

最新推荐文章于 2020-08-07 20:01:57 发布

原创最新推荐文章于 2020-08-07 20:01:57 发布 · 393 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JAVASCRIPT #DOM

web-javascript 专栏收录该内容

93 篇文章

订阅专栏

本文介绍了一个简单的JavaScript实现的购物车商品数量增减及总价计算功能。通过按钮操作来增加或减少商品数量，并实时更新每项商品的小计及购物车总价。适用于初学者学习JavaScript DOM操作及事件处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
 <head>
  <title> new document </title>
  <meta charset="utf-8" />
	<script>
		/**
		 * btn ：用户点击的 按钮 对象
		 */
		function cal(btn){
			var c = btn.textContent;
			if(c == '+'){
				//1、获取 span 里的 数字
				var span = btn.previousElementSibling;
				var spanValue = span.textContent;
				//2、将 span 的值 + 1 再赋值给span
				spanValue = parseInt(spanValue) + 1;
				span.textContent = spanValue; //为span元素设置值
				//3、获取 btn 的父元素 的上一个 兄弟元素节点 里面的文本
				var price = btn.parentNode.previousElementSibling.textContent;
				//4、计算 小计
				var money = spanValue * parseInt(price);
				//5、将 小计 的金额 保存在 小计 td 中
				//获取 btn 父元素 的 下一个 兄弟元素节点，改值
				btn.parentNode.nextElementSibling.textContent = money;

			}else{
				//获取 btn 的下一个 兄弟元素 的文本 ,并且转换成整数，保存在spanValue中
				var spanValue = parseInt(btn.nextElementSibling.textContent);
				
				//获取 btn 父元素 的上一个 兄弟元素 的文本，并且转换成整数，保存在price中
				var price = parseInt(btn.parentNode.previousElementSibling.textContent);
				//判断如果 数量已经 为1 的时候，就不能再减，只有数量在大于1的时候才允许做 减的操作
				if(spanValue > 1){
					//将当前数量 - 1
					spanValue = spanValue - 1;
					//将更新的 数量 保存给 span
					btn.nextElementSibling.textContent = spanValue;
					//计算小计 ：当前数量 * 当前价格
					var money = spanValue * price;
					//将 小计 赋值给 最后一个td
					btn.parentNode.nextElementSibling.textContent = money;
				}

			}
			//计算总计
			var tbody = document.getElementById("tbl").getElementsByTagName("tbody")[0];
			//获取 tbody 中所有的 tr
			var trs = tbody.getElementsByTagName("tr");
			var sum = 0;
			//循环 所有 tr，得到 每个tr中的 最后一个td
			for(var i = 0 ; i < trs.length ;i++){
				var tr = trs[i];
				var td = tr.lastElementChild;
				sum = sum + parseInt(td.textContent);
			}
			
			document.getElementById("total").textContent = sum;
		}
	</script>
 </head>

 <body>
  <table id="tbl">
		<thead></thead>
		<tbody>
			<tr>
				<td>iphone6</td>
				<td>4488</td>
				<td>
					<button onclick="cal(this)">-</button>
					<span>1</span>
					<button onclick="cal(this)">+</button>
				</td>
				<td>4488</td>
			</tr>
			<tr>
				<td>iphone6</td>
				<td>4488</td>
				<td>
					<button onclick="cal(this)">-</button>
					<span>1</span>
					<button onclick="cal(this)">+</button>
				</td>
				<td>4488</td>
			</tr>
			<tr>
				<td>iphone6</td>
				<td>4488</td>
				<td>
					<button onclick="cal(this)">-</button>
					<span>1</span>
					<button onclick="cal(this)">+</button>
				</td>
				<td>4488</td>
			</tr>
		</tbody>
		<tfoot>
			<tr>
				<td colspan="3">总计:</td>
				<td id="total">0</td>
			</tr>
		</tfoot>
	</table>
 </body>
</html>