javascript、JSP、JS有什么区别和联系

本文主要介绍关于Javascript的知识点，对【js实现购物车，原理简单，代码解释--＞详细】和【Javascript、JSP、JS有什么区别和联系】有兴趣的朋友可以看下由【刘先生LSS】投稿的技术文章，希望该技术和经验能帮到你解决你所遇的【】相关技术问题。

Javascript、JSP、JS有什么区别和联系

大家在淘宝或者京东购物时，看到在选中全选按钮，或者其他商品选中，从而触发全选按钮是怎么实现的吗？

单商品的价格计算随着数量的增多减少而上升或者下降吗？

总价随着每个商品的价格相加或相减，而变化吗？

来看看下面的代码吧，实现以上所有功能。

	
		
  
		
	
	
		
  
 
   

    
 
     
 
     
名称
 
     
价格
 
     
数量
 
     
小计
 
     
操作
 
    
 
    
 
     
 
     
键盘
 
     
500
 
     
 -  + 
 
     
500
 
     
删除
 
    
 
    
 
     
 
     
鼠标
 
     
100
 
     
 -  + 
 
     
100
 
     
删除
 
    
 
    
 
     
总计
 
     
 
    
 
   
  
	
	

js代码：

//购物车添加数量
function add(btn) {
	//数量*价格
	//1、获取到当前数量+1，并更新input框
	var num = btn.parentElement.children[1].value;
	btn.parentElement.children[1].value = ++num;
	//2、获取单价,字符串
	var price = btn.parentElement.previousElementSibling.innerText
	//3、计算小计，并更新渲染
	var total = parseFloat(price) * num;
	btn.parentElement.nextElementSibling.innerText = total;
	
	//总计
	 calSum();
}

//购物车减去数量
function minus(btn) {
	//数量*价格
	//1、获取到当前数量+1，并更新input框
	var num = btn.parentElement.children[1].value;
	if (num == 0) {
		return;
	}
	btn.parentElement.children[1].value = --num;
	//2、获取单价,字符串
	var price = btn.parentElement.previousElementSibling.innerText
	//3、计算小计，并更新渲染
	var total = parseFloat(price) * num;
	btn.parentElement.nextElementSibling.innerText = total;
	
	//总计
	 calSum();
}

//全选和反选
var _all = document.getElementById("all");
var _sum = document.getElementById("sum");
//选出除了全选的复选框
var _boxes = document.querySelectorAll("input[type=checkbox]:not(#all)")
//全选
_all.Onclick= function() {
	//checked:获取全框的选中状态
	//this:当前的点击对象
	var status = this.checked;
	_boxes.forEach(function(tag) {
		//下边三个选框跟全选框的状态保持一致
		tag.checked = status;
	})
	calSum();
}

//单选
_boxes.forEach(function(tag) {
	tag.Onclick= function() {
		//过滤出所有被选中的复选框
		var chs = Array.from(_boxes).filter(function(item) {
			return item.checked == true;
		})
		//如果过滤出得选中的复选框长度等于所有复选框长度，说明全选
		_all.checked = chs.length === _boxes.length;
		
		//总计
		 calSum();
	}

})


//总计
function  calSum(){
	var sum=0;
	_boxes = document.querySelectorAll("input[type=checkbox]:not(#all)")
	var newBoxes=Array.from(_boxes).filter(function(tag){
		return tag.checked==true;
	})
	
	newBoxes.forEach(function(tag){
		sum+=parseFloat(tag.parentElement.parentElement.children[4].innerText)
	})
	
	_sum.innerText=sum;

}

看效果:

?不光要看懂理解，也要多写写，才能印象更深啊。行动起来！！！学习之余也要适当放松哦。

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?有不理解的部分可以评论区留言，或者私信我哦。

本文《js实现购物车，原理简单，代码解释--＞详细》版权归刘先生LSS所有，引用js实现购物车，原理简单，代码解释--＞详细需遵循CC 4.0 BY-SA版权协议。