js案例4---PC端购物车PC端购物车
⼀、案例效果
⼆、实现步骤
a. 实现全选反选功能，点击选中当前⾏变⾊。
b. 给加减按钮添加事件以及给⽂本框添加事件。
c. 给⼩计添加事件。
d. 实现删除功能，全部删除、选中删除、当前⾏删除。
e. 实现商品总件数计数以及商品总价的功能。
三、核⼼代码
//⽹页加载完成，先获取购物车的数据，进⾏动态绑定渲染界⾯
var ckall=null;
var cklist=null;
var fanck=null;
var item=null;
var btnLeft=null;
var btnRight=null;
var Number=null;
var price=null;
var smallprice=null;
var numCount=null;
var Totle=null;
var removeAll=null;
var cartInfo=null;
var ckRemove=null;
var Remove=null;
varisAllcheck=null;
/
/1.全选功能
ckall=document.querySelector(".ckall");
ElementsByClassName("cklist");
fanck=document.querySelector(".fanck");
ElementsByClassName("item");
ElementsByClassName("btn-l");
ElementsByClassName("btn-r");
ElementsByClassName("number");
ElementsByClassName("price");
ElementsByClassName("smallprice");    numCount=document.querySelector(".num-count");
Totle=document.querySelector(".totle");
removeAll=document.querySelector(".removeAll");
cartInfo=document.querySelector(".cart-info");
ckRemove=document.querySelector(".ckremove");
ElementsByClassName("remove");
//获取全选按钮的check属性值，根据值进⾏全选和不选
var ckStatus=this.checked;
checkSyatus(ckStatus);
//统计
getAllNumber();
isAllcheck=true;
}
checkSyatus('fan');
getAllNumber();
}
//cklist的⾃⾝的事件
addcklistHandle();
//给计数按钮添加事件
addButton();
//点击清理购物车，全部删除
cartInfo.innerHTML="";
}
//删除选中商品
for(var i=0;i<cklist.length;i++){
if(cklist[i].checked){
item[i].remove();
updateIndex();
i--;
}
}
if(isAllcheck){
ckall.checked=false;
isAllcheck=false;
}
getAllNumber();
}
}
//给cklist添加事件的⽅法
function addcklistHandle(){
for(var i=0;i<cklist.length;i++){
cklist[i].index=i;
cklist[i].onclick=function(){
checkSyatus();
//点击单个选择，当前⾏变⾊
changeColor(this.checked,this.index);
getAllNumber();
}
}
}
//封装⽅法实现全选和反选功能
function checkSyatus(status){
//检测status变量的类型
var isall=true;
for(var i=0;i<cklist.length;i++){
if(status!=undefined){
cklist[i].checked=typeof status=="boolean"?status:!cklist[i].checked;
changeColor(cklist[i].checked,i);
}
if(!cklist[i].checked)
isall=false;
}
if(!isall){
ckall.checked=false;
}
else{
ckall.checked=true;
isAllcheck=true;
}
}
//当前⾏变⾊
function changeColor(checked,index){
if(checked){
item[index].classList.add("ckColor");
}
else{
item[index].ve("ckColor");
}
}
//加减按钮添加事件以及给⽂本框添加事件
function addButton(){
for(var i=0;i<btnLeft.length;i++){
btnLeft[i].index=i;
btnLeft[i].onclick=function(){
//获取中间⽂本值进⾏--
changeNumber(this.index,'left');
getAllNumber();
}
btnRight[i].index=i;
btnRight[i].onclick=function(){
//获取中间⽂本值进⾏++
changeNumber(this.index,'right');
getAllNumber();
}
Number[i].onkeydown=function(e){
//isNaN是检测是否是⾮数字的，是⾮数字返回true，数字返回false
if(isNaN(e.key)&& e.keyCode!=8){
/
/如果是⾮数字，阻⽌事件默认⾏为
e.preventDefault();
}
}
Number[i].index=i;
Number[i].onkeyup=function(e){
if(this.value==''){
alert("值最⼩为1！");
this.value=1;
}
//计算⼩计
changeNumber(this.index,'');
getAllNumber();
}
//点击当前⾏删除
Remove[i].index=i;
Remove[i].onclick=function(){
Remove[i].onclick=function(){
item[this.index].remove();
updateIndex();
getAllNumber();
if(item.length==0&&isAllcheck){
isAllcheck=false;
ckall.checked=false;
}
}
}
}
//加减中间数字变化的⽅法
function changeNumber(index,way){
var value=parseInt(Number[index].value);
switch(way){
case'left':
value--;
if(value<1){
return;
}
if(value==1){
btnLeft[index].classList.add('disColor');
btnLeft[index].disabled='disabled';
}
break;
case'right':
value++;
if(value>1){
btnLeft[index].ve('disColor');
btnLeft[index].disabled='';
}
break;
}
Number[index].value=value;
//计算⼩计
smallprice[index].innerText=(parseFloat(price[index].innerText)*value).toFixed(2); }
//统计数量和计算总价--被选中的元素统计
function getAllNumber(){
var count =0;
var totlePrice=0;
for(var i=0;i<Number.length;i++){
if(cklist[i].checked){
count+=parseInt(Number[i].value);
totlePrice+=parseFloat(smallprice[i].innerText);
}
}
numCount.innerText=count;
网页购物车代码Totle.Fixed(2);
}
/
/删除之后对使⽤index属性绑定索引值的进⾏重新绑定
function updateIndex(){
for(var i=0;i<item.length;i++){
btnLeft[i].index=i;
btnRight[i].index=i;
Remove[i].index=i;
cklist[i].index=i;
Number[i].index=i;
}
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。