我的js文件上传

来源:2-12 删除商品功能

奉化奔腾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();
}

写回答 关注

1回答

  • 老猿
    2016-03-15 22:34:51

    好厉害的样子

用JS实现购物车特效

通过JavaScript实现类似淘宝网络购物车功能效果

43236 学习 · 167 问题

查看课程

相似问题