简易计算商品总价

最新推荐文章于 2023-12-12 20:05:23 发布

要做程序员的牛杂

最新推荐文章于 2023-12-12 20:05:23 发布

阅读量363

点赞数 1

文章标签： html java js

本文链接：https://blog.csdn.net/qq_63198813/article/details/131893442

版权

一.主要完成点

1.显示单个商品的数量统计，单价，总计

2.可以通过按钮添加来增加商品的数量和总计

3.实现总商品件数统计和总价值统计已经最贵商品统计

二.主要代码

html代码部分：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>计算商品总价</title>
	</head>
	<body>
		<ul id="list">
			<li>
				<input type="button" value="-" class="subtract" />
				<span>0</span>
				<input type="button" value="+"  class="add"/>
				单价：<em>15</em>元；
				小计：<strong>0</strong>元；
			</li>
			<li>
				<input type="button" value="-" class="subtract" />
				<span>0</span>
				<input type="button" value="+"  class="add"/>
				单价：<em>10</em>元；
				小计：<strong>0</strong>元；
			</li>
			<li>
				<input type="button" value="-" class="subtract" />
				<span>0</span>
				<input type="button" value="+"  class="add"/>
				单价：<em>5</em>元；
				小计：<strong>0</strong>元；
			</li>
			<li>
				<input type="button" value="-" class="subtract" />
				<span>0</span>
				<input type="button" value="+"  class="add"/>
				单价：<em>2</em>元；
				小计：<strong>0</strong>元；
			</li>
			<li>
				<input type="button" value="-" class="subtract" />
				<span>0</span>
				<input type="button" value="+"  class="add"/>
				单价：<em>1</em>元；
				小计：<strong>0</strong>元；
			</li>
		</ul>
		<p>商品一共<span id="num">0</span>件；<br />
		一共花费<span id="price">0</span>元；
		<br />其中最贵的商品单价是<span id="max">0</span>元；</p>
</body>
</html>

运行上述代码结果图：

在完成主体部分后便使用js让其能够达到预想所要完成的点，在js中主要使用了对子类循环添加监听事件，在下部分时需要实时监控其变量使用父类事件委托来解决实时更新总价以及最贵单价：

js代码部分：

<script>	
			 // 当方入其中时
			 window.onload=function(){
			        var ul=document.getElementById("list"); // 获取主链表
			        var li=ul.getElementsByTagName("li"); // 获取主链表下的单链
					var price = document.getElementById("price");
					var prices = Number(price.innerHTML);
					var num = document.getElementById("num");
					var nums = Number(num.innerHTML);
					for(var i=0;i<li.length;i++){ // 循环输入直接一个函数省去全部
					    fn(li[i]);
					}
					
					// 对每个主链进行单独事件的处理
			        function fn(li){
			           // 按键
			            var em=li.getElementsByTagName("em")[0]; // 单价
			            var strong=li.getElementsByTagName("strong")[0]; // 小计
			            var span=li.getElementsByTagName("span")[0]; // 数量
					    var aBtn=li.getElementsByTagName("input"); 
			            var num1=Number(span.innerHTML);
			            var num2=parseFloat(em.innerHTML);
			            aBtn[0].onclick=function(){
			                num1--;
			                if(num1<0){ //这里判断若为0，不能再减
			                    num1=0;
			                }
			                span.innerHTML = num1;
			                strong.innerHTML=num1*num2;
							// 总件数减少
							nums--;
							if(nums<0){ //z这里判断若为0，不能再减
							    nums=0;
							}
							num.innerHTML = nums;
			            };
			            aBtn[1].onclick=function(){
			                num1++;
			                span.innerHTML = num1;
			                strong.innerHTML=  num1*num2;
							// 总件数增加
							nums++;
							num.innerHTML = nums;
			            }
			        }	
									
					// 计算总件可以在子元素中可以进行统计,但对于总花费，和实时获取最贵单价还是比价麻烦的所以使用事件委托
					ul.addEventListener('click',function(e){
						// 给父类设置事件
						e = e || window.event;
						let target = e.target || e.srcElement;
						
						// 置零每一次计算都是重新计算
						prices = 0;
						// 统计总价
						for (let i = 0,len = li.length; i < len; i ++){
							var em = document.getElementsByTagName("em")[i];
							var num = Number(em.innerHTML);
							var x = Number(document.getElementsByTagName("span")[i].innerHTML);
							let sum;
						    if (x != 0){
						    sum = num*x;
				         } else{
							sum = 0;		
						 }
						prices +=sum;
						price.innerHTML = prices;
						}
							
						// 统计最贵单价
						var max = document.getElementById("max");
						for (let i = 0,len = li.length; i < len; i ++){
							if (document.getElementsByTagName("span")[i].innerHTML != 0){
								var em = document.getElementsByTagName("em")[i].innerHTML; // 获取他的单价
								console.log(em);
								max.innerHTML = em;
								return; 
							}		
						}
						max.innerHTML = 0; // 这是在最后的进行置0防止在全部点击删除单价后还保留着最原始的单价
					},false);
			    }			
		</script>

至此完成所有目标，得到最后结果图演示：