JS 使用节点实现简单购物车数量和金额

快来打我* 2023-10-05 08:34 24阅读 0赞

#### 一、 购物车中商品数量 ####

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70][]

#### 二、计算金额 ####

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70 1][]

#### HTML页面: ####

#### 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);
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2020081717243789.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200817172542711.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4,size_16,color_FFFFFF,t_70