制作淘宝购物车特效

计算总金额和积分特效

• 此特效需要确定的变量有商品金额总计、可获商品积分、每一行商品的单品积分、每一行商品的单价、每一行商品的数量、每一行商品的小计，然后通过DOM操作找到这些变量，再使用算术运算符计算出最终总金额或积分，最后通过innerHTML把结果赋值给总金额或积分

 

for(var i=1;i<myTableTr.length;i++){//从1开始，第一行的标题不计算
	if(myTableTr[i].getElementsByTagName("td").length>2){ //最后一行不计算
	  point=myTableTr[i].getElementsByTagName("td")[3].innerHTML;
	  price=myTableTr[i].getElementsByTagName("td")[4].innerHTML;              		    
          number=myTableTr[i].getElementsByTagName("td")[5].getElementsByTagName("input")[0].value;
          integral+=point*number;
          total+=price*number;
          myTableTr[i].getElementsByTagName("td")[6].innerHTML=price*number;
	}
}
document.getElementById("total").innerHTML=total;
document.getElementById("integral").innerHTML=integral;

商品数量增加或减少特效

商品数量增加特效

• 当用户点击商品“数量”那一行中任意一个单元格的“+”时，其商品数量会发生增加，同时当前一行的商品小计也会增加，下面的总价和总积分也会随之增加

 商品数量减少特效

• 当用户点击商品“数量”那一行中任意一个单元格的“-”时，其商品数量会发生减少，同时当前一行的商品小计也会减少，下面的总价和总积分也会随之减少

 

• 若商品数量为1时，不能再往下减了，则弹出“宝贝数量必须是大于0”

 

• 商品数量增加或减少特效主要通过条件判断语句实现

 

if(flag=="minus"){/*减少商品数量*/
	if(numId.value<=1){
		alert("宝贝数量必须是大于0");
		return false;
	}
	else{
		numId.value=parseInt(numId.value)-1;
	}
}
else{/*flag为add，增加商品数量*/
	numId.value=parseInt(numId.value)+1;
}

操作全选按钮

• 当用户点击表格第一行的全选复选框时，下面复选框则全被选中

 

• 当用户再次点击全选复选框时，下面复选框全部取消选中

 

• 复选框全选或全不选效果主要通过for循环实现

 

function selectAll(){
	var oInput=document.getElementsByName("cartCheckBox");
 	for (var i=0;i<oInput.length;i++){
 		oInput[i].checked=document.getElementById("allCheckBox").checked;
	}
}

 操作商品复选框

• 若全选后，而商品的某一个复选框取消选中，则表格第一行的全选复选框会自动取消选中状态

 

• 若手动选中每一个商品的复选框时，则表格第一行的全选复选框会自动变为选中状态，效果与前面全选效果一致

 

• 此特效的重点在于要根据单个复选框的选择情况确定全选复选框是否被选中

 

function selectSingle(){
	var k=0;
	var oInput=document.getElementsByName("cartCheckBox");
	 for (var i=0;i<oInput.length;i++){
	   if(oInput[i].checked==false){
		  k=1;
		  break;
	    }
	}
	if(k==0){
		document.getElementById("allCheckBox").checked=true;
	}
	else{
		document.getElementById("allCheckBox").checked=false;
	}
}

• 需获取当前行的索引，然后再使用deleteRow()方法删除即可

 

function deleteRow(rowId){
	var Index=document.getElementById(rowId).rowIndex; //获取当前行的索引号
	document.getElementById("shopping").deleteRow(Index);
	document.getElementById("shopping").deleteRow(Index-1);
}

 删除选中行的商品

• 若选中某一行商品复选框时，再点击最后一行的“删除所选”按钮，也可删除复选框被选中的那一行商品以及店铺名称和卖家信息，且此操作可一次性删除多个或全部删除。若当商品全部删除时，下面的总价和总积分为0

• 需要使用for循环遍历所有的复选框按钮，然后再利用if判断删除选中的商品

 

function deleteSelectRow(){
	var oInput=document.getElementsByName("cartCheckBox");
	var Index;
	for (var i=oInput.length-1;i>=0;i--){
	   if(oInput[i].checked==true){
		 Index=document.getElementById(oInput[i].value).rowIndex;
		 document.getElementById("shopping").deleteRow(Index);
	     document.getElementById("shopping").deleteRow(Index-1);
	    }
	}
}