奉化奔腾JAVA
2015-07-18 17:28
window.onload=function(){
// if (!document.getElementsByClassName) {
// document.getElementsByClassName = function (cls) {
// var ret = [];
// var els = document.getElementsByTagName('*');
// for (var i = 0, len = els.length; i < len; i++) {
// if (els[i].className === cls
// || els[i].className.indexOf(cls + ' ') >= 0
// || els[i].className.indexOf(' ' + cls + ' ') >= 0
// || els[i].className.indexOf(' ' + cls) >= 0) {
// ret.push(els[i]);
// }
// }
// return ret;
// }
// }
//获取对象
var cartTable=document.getElementById('cartTable');
var tr=cartTable.children[1].rows;
var checkInputs=document.getElementsByClassName('check');
var checkAllInputs=document.getElementsByClassName('check-all');
var selectedTotal= document.getElementById('selectedTotal');
var priceTotal= document.getElementById('priceTotal');
var selected= document.getElementById('selected');
var foot= document.getElementById('foot');
var selectedViewList= document.getElementById('selectedViewList');
var deleteAll=document.getElementById('deleteAll');
//函数:计算
function getTotal(){
var selected=0;
var price=0;
var HTMLstr='';
for (var i=0,len=tr.length;i<len;i++){
if(tr[i].getElementsByTagName('input')[0].checked){
tr[i].className='on';
selected +=parseInt(tr[i].getElementsByTagName('input')[1].value);
price +=parseFloat(tr[i].cells[4].innerHTML);
HTMLstr +='<div><img src="'+ tr[i].getElementsByTagName('img')[0].src +'"/><span class="'+'del'+'" index="'+i+'">取消选择</span></div>';
}else{
tr[i].className='';
}
}
selectedTotal.innerHTML=selected;
priceTotal.innerHTML=price.toFixed(2);
selectedViewList.innerHTML=HTMLstr;
if(selected==0){
foot.className='foot';
}
}
//函数:小计
function getSubTotal(tr){
var tds=tr.cells;
var price=parseFloat(tds[2].innerHTML);
var count=parseInt(tr.getElementsByTagName('input')[1].value);
var SubTotal=parseFloat(price * count);
tds[4].innerHTML=SubTotal.toFixed(2);
}
//以下for循环为所有的勾选框,添加单击事件
for (var i = 0, len=checkInputs.length; i<len; i++) {
checkInputs[i].onclick=function(){
if(this.className==='check-all check'){
for(var j=0;j<checkInputs.length;j++){
checkInputs[j].checked=this.checked;
}
}
if (this.checked==false){
for(var k=0;k<checkAllInputs.length;k++){
checkAllInputs[k].checked=false;
}
}
getTotal();
}
};
//单击事件:以下为已选商品单击时,是否显示选中的图片;
selected.onclick=function(){
if (foot.className=="foot"){
if (selectedTotal.innerHTML != 0) {
foot.className = 'foot show';
}
}else{
foot.className="foot";
}
}
//单击事件:在已选的框中的图片上,点击“取消选择”
selectedViewList.onclick=function(e){
// console.log(e);
// if(e){
// e=e;
// }else{
// e=window.event;
// };
e=e || window.event;
var el=e.srcElement;
if (el.className=='del'){
var index=el.getAttribute('index');
var input=tr[index].getElementsByTagName('input')[0];
input.checked=false;
input.onclick();
}
}
//以下为"+","-"及旁边的“删除”按钮的单击事件处理
//还有,为"文件框"中输入数字的键盘放开事件
for (var i=0;i<tr.length;i++){
//单击事件:以下为"+","-"及旁边的“删除”按钮的单击事件处理
tr[i].onclick=function(e){
// alert('a');
e=e || window.event;
var el=e.srcElement;
var cls=el.className;
var input=this.getElementsByTagName('input')[1];
var val=parseInt(input.value);
var reduce=this.getElementsByTagName('span')[1];
switch(cls){
case 'add':
// alert('add');
input.value=val+1;
getSubTotal(this);
reduce.innerHTML='-';
break;
case 'reduce':
// alert('reduce');
if (val>1){
input.value=val-1;
getSubTotal(this);
}
if (input.value<=1){
reduce.innerHTML='';
}
break;
case 'delete':
var conf=confirm('确认要删除吗?');
if(conf){
this.parentNode.removeChild(this);
}
break;
default:
break;
}
// alert('b');
getTotal();
}
//键盘放开事件:为"文件框"中输入数字的键盘放开事件
tr[i].getElementsByTagName('input')[1].onkeyup=function(){
var val=parseInt(this.value);
var tr=this.parentNode.parentNode;
var reduce=tr.getElementsByTagName('span')[1];
if (isNaN(val) || val<1){
val=1;
}
this.value=val;
if(val<=1){
reduce.innerHTML='';
}else{
reduce.innerHTML='-';
}
getSubTotal(tr);
getTotal();
}
}
//单击事件:全部删除事件
deleteAll.onclick=function(){
if(selectedTotal.innerHTML!='0'){
var conf=confirm('确认要删除吗?');
if (conf){
for(i=0;i<tr.length;i++){
var input=tr[i].getElementsByTagName('input')[0];
if (input.checked){
tr[i].parentNode.removeChild(tr[i]);
i--;
}
}
getTotal();
}
}
}
//以下为,打开时,勾选框缺省为选中状态
checkAllInputs[0].checked=true;
checkAllInputs[0].onclick();
}
好厉害的样子
用JS实现购物车特效
43236 学习 · 167 问题
相似问题