Maison > interface Web > js tutoriel > 购物车程序完善版(JavaScript代码)

购物车程序完善版(JavaScript代码)

高洛峰
Libérer: 2016-11-26 10:13:40
original
1446 Les gens l'ont consulté

[javascript]
/**********************************购物车类***************************************/ 
 
    var product=function(productArr){/*商品类基类productArr=>array;productArr['ID'],productArr['name'],productArr['pic'],=productArr['lvs'],productArr['width'],productArr['thickness '],productArr['length'],productArr['open'],productArr['capacity']*/ 
        var _ID=productArr['ID'],_name=productArr['name'],_pic=productArr['pic'],_price=productArr['price'],_weight=productArr['weight'],_originalPrice=productArr['originalPrice'],_this=this; 
        this.num=productArr['num']; 
        this.getName=function(){ 
            return _name; 
            } 
        this.getID=function(){ 
            return _ID; 
            }    
        this.getPrice=function(){ 
            return _price; 
            } 
        this.getWeight=function(){ 
            return _weight; 
            } 
        this.getPic=function(){ 
            return _pic; 
            } 
        this.getOriginalprice=function(){ 
            return _originalPrice; 
            } 
        this.setNum=function(newNum){ 
            _this.num=newNum; 
            } 
        this.getTotal=function(){ 
            var total=_this.num*_this.getPrice(); 
            return total; 
            }    
         
        } 
     
    var makeProductObj=function(gID,pID,num){//制造product对象函数,返回制造的product对象,gID=>数据组ID,pID=>商品ID 
            /*********制造代码*********/ 
            var pData=[]; 
            (function(gID,pID){ 
                $.ajax({ 
                    url:'/module/data/default.php?action=dataDetail&groupID='+gID+'&ID='+pID+'&r='+newDate(), 
                    type:'post', 
                    dataType:'xml', 
                    async:false, 
                    /**工厂方法***/ 
                    success:function(dataXML){ 
                        pData.price=$(dataXML).children('root').children('extend19').text(); 
                        pData.originalPrice=$(dataXML).children('root').children('extend9').text(); 
                        pData.weight=$(dataXML).children('root').children('extend21').text(); 
                        pData.name=$(dataXML).children('root').children('name').text(); 
                        pData.pic=$(dataXML).children('root').children('extend17').text(); 
                        } 
                    }); 
                })(gID,pID); 
            return new product({ 
                num:num, 
                name:pData.name, 
                ID:pID, 
                price:pData.price, 
                pic:pData.pic, 
                weight:pData.weight, 
                originalPrice:pData.originalPrice, 
                }); 
        } 
    var cartCookie=$.cookies.get('productItem');//cookie的全局变量=>'商品ID|数量,商品ID|数量' 
    //alert(mockCookie); 
     
    var productCollection=function(){//商品搜集类 
            var products=[]; 
            var hasOne=function(productObj){ 
                var isOne=0; 
                for(var i=0;i if(products[i].getID()==productObj.getID()){
isOne=1;
break;
}
}
return isOne;
}
var initProduct
/********初始哈products数组代码********/
//alert(mockCookie);
if(cartCookie){
initProduct=cartCookie.split(',');
for(var i=0;i var _productTemp=initProduct[i].split('|');
var _proObj=new makeProductObj(4,parseInt(_productTemp[0]),parseInt(_productTemp[1]));
if(hasOne(_proObj)!=1){
products.push(_proObj);
}
}
}
/*******初始哈products数组代码*********/

this.addProduct=function(productObj){//添加商品
if(hasOne(productObj)!=1){
products.push(productObj);
}
}
this.delProduct=function(productObj){//删除商品
var _tempProducts=[];
for(var i=0;i if(products[i].getID()!==productObj.getID()){
//console.log(products[i].getID());
_tempProducts.push(products[i]);
}
}
products=_tempProducts;
}//del
this.setNumByPid=function(pID,newNum){//设置商品数量
for(var k=0;k if(products[k].getID()==pID){
products[k].setNum(newNum);
break;
}
}
}
this.getProductById=function(pID){//pID为商品的ID,获得商品对象
for(var j=0;j if(products[j].getID()==pID){
return products[j];
break;
}
}
return false;
}
this.getProducts=function(){//获得商品对象数组
return products;
}
this.getNeedMoney=function(){//获得所有商品的总价钱
var _needMoney=0;
for(var k=0;k _needMoney+=products[k].getTotal();
}
return _needMoney;
}//getNeedMoney
}


var cart=function(){//购物车类,productCollection为委托对象
var _productCollection='';
var _nowCollection='';
var _this=this;
this.setCollection=function(collection){//设置collection
_productCollection=collection;
_nowCollection=_productCollection;//动态collection对象
_this.setTemp();
}
this.temp=[];//初始化collection对象
this.setTemp=function(){
if(!_productCollection){
throw new Error('请先指定collection对象!');
}
var listProduct=_productCollection.getProducts();
for(var i=0;i _this.temp[i]=[];
_this.temp[i]=listProduct[i];
}
};
this.delProduct=function(pID){//删除单个商品pID->商品的ID号 
                    var needProduct=_nowCollection.getProductById(pID); 
                    if(needProduct!=false){ 
                        _nowCollection.delProduct(needProduct); 
                        } 
                } 
            this.setNumByPid=function(pID,newNum){//设置某个商品的数量,pID->商品ID 
                    _nowCollection.setNumByPid(pID,newNum); 
                } 
            this.getCurrentNumByPid=function(pID){//获得某个商品的数量,pID->商品ID 
                    var productObj=_nowCollection.getProductById(pID); 
                    return productObj.num; 
                } 
            this.getTotalMoney=function(){//获得总金额 
                    var _money=_nowCollection.getNeedMoney(); 
                    return _money; 
                } 
            this.getTotalMoneyByPid=function(pID){//获得单个商品的总金额 
                    var _needProduct=_nowCollection.getProductById(pID); 
                    if(_needProduct===false){ 
                        throw new Error('无此商品'); 
                        } 
                    var _totalMoney=_needProduct.getTotal(); 
                    return _totalMoney; 
                } 
            this.renderCart=function(){//渲染函数 
                    throw new Error('错误,该方法必须在子类中实现'); 
                } 
            this.bindEvent=function(){//绑定事件函数 
                    throw new Error('错误,该方法必须在子类中实现'); 
                } 
            //this.renderCart(); 
            this.touchOff=function(){//触发 www.2cto.com  
                    _this.renderCart(); 
                    _this.bindEvent(); 
                } 
            this.getNewCollection=function(){//获得新的collection对象 
                    return _nowCollection; 
                } 
        } 
/********************************购物车类****************************************/ 
        var shoppingTrolley=function(){ 
                //alert('test'); 
                /***************检查*****************/ 
                if(!cartTest){ 
                    throw new Error('请实例化cart对象'); 
                    } 
                /***************检查***************/ 
                cartTest.renderCart=function(){//子渲染 
                            var _content=''; 
                            for(var i=0;i var _productEach=this.getNewCollection().getProducts()[i];
//alert(_productEach.getName());
_content+=''+_productEach.getName()+'$'+_productEach.getOriginalprice()+'$'+_productEach.getPrice()+''+_productEach.getWeight()+'Kg-'+_productEach.num+'+$'+_productEach.getTotal()+'Delete'; 
                                } 
                            //document.write(_content); 
                            //alert(_content); 
                            $('#checkCart').find('tr').eq(0).after(_content);//渲染面板 
                            $('.step_total').find('.step_total_right').children('span').html('$'+cartTest.getTotalMoney()); 
                            /**popBoxCount**/ 
                    }//renderCart 
                    cartTest.bindEvent=function(){ 
                                    var _this=this; 
                                    //alert($('#'+win1.ID).find('.cartList').eq(0).html()); 
                                    $('#checkCart').find('.cartList').each(function(index){ 
                                            var _each=$(this); 
                                            _each.find('td:last').css('cursor','pointer').click(function(){ 
                                                //alert('删除'); 
                                                var _tempThis=$(this); 
                                                _this.delProduct($(this).parents('tr').find('td:first').find('input[type=hidden]').val()); 
                                                $(this).parents('tr').remove(); 
                                                /*******重新计算商品的总金额*******/ 
                                                $('.step_total').find('.step_total_right').children('span').html('$'+_this.getTotalMoney()); 
                                                /*******重新计算商品的总金额*******/ 
                                                });//click删除商品 
                                             
                                            _each.children('td[class=numJia]').css('cursor','pointer').click(function(){ 
                                                    var _jiaThis=$(this); 
                                                    //alert($(this).parents('tr').parents('table').find('input[type=hidden]').val()); 
                                                    _this.setNumByPid($(this).parents('tr').find('td:first').find('input[type=hidden]').val(),_this.getCurrentNumByPid($(this).parents('tr').find('td:first').find('input[type=hidden]').val())+1); 
                                                    //alert(_jiaThis.parents('td').siblings('td[class=nowNum]').children('input').val()); 
                                                    _jiaThis.siblings('td[class=nowNum]').html( 
                                                        _this.getCurrentNumByPid(_jiaThis.parents('tr').find('td:first').find('input[type=hidden]').val()) 
                                                    ); 
                                                    /***********重新计算某个商品的总金额***********/ 
                                                    _jiaThis.siblings('td[class=eachTotal]').children('span').html('$'+_this.getTotalMoneyByPid(_jiaThis.parents('tr').find('td:first').find('input[type=hidden]').val())); 
                                                    /***********重新计算某个商品的总金额***********/ 
                                                     
                                                    /*******重新计算商品的总金额*******/ 
                                                    $('.step_total').find('.step_total_right').children('span').html('$'+_this.getTotalMoney()); 
                                                    /*******重新计算商品的总金额*******/ 
                                                });//click增加商品数量 
                                            _each.children('td[class=numJian]').css('cursor','pointer').click(function(){ 
                                                    var _jianThis=$(this); 
                                                    if(_this.getCurrentNumByPid($(this).parents('tr').find('td:first').find('input[type=hidden]').val())>1){ 
                                                        _this.setNumByPid($(this).parents('tr').find('td:first').find('input[type=hidden]').val(),_this.getCurrentNumByPid($(this).parents('tr').find('td:first').find('input[type=hidden]').val())-1); 
                                                        _jianThis.siblings('td[class=nowNum]').html( 
                                                        _this.getCurrentNumByPid($(this).parents('tr').find('td:first').find('input[type=hidden]').val()) 
                                                    ); 
                                                    /***********重新计算某个商品的总金额***********/ 
                                                    _jianThis.siblings('td[class=eachTotal]').children('span').html('$'+_this.getTotalMoneyByPid(_jianThis.parents('tr').find('td:first').find('input[type=hidden]').val())); 
                                                    /***********重新计算某个商品的总金额***********/ 
                                                     
                                                    /*******重新计算商品的总金额*******/ 
                                                    $('.step_total').find('.step_total_right').children('span').html('$'+_this.getTotalMoney()); 
                                                    /*******重新计算商品的总金额*******/ 
                                                        }//如果当前商品数量大于1 
                                                });//click减少商品数量 
                                        });//each 
                            }//bindEvent 
                    cartTest.touchOff();//触发 
                     
                    $(window).unload(function(){//当离开页面时 
                            //alert('狗头拜'); 
                            var lastCollection=cartTest.getNewCollection();  
                            var _products=lastCollection.getProducts(); 
                            //console.log(_products.length); 
                            var _cartCookie=''; 
                            var _countNum=0; 
                            for(var i=0;i<_products.length;i++){
_cartCookie+=_products[i].getID()+'|'+_products[i].num+',';
_countNum+=_products[i].num*_products[i].getWeight();
}
_cartCookie=_cartCookie.substring(0,_cartCookie.length-1);
//alert(_cartCookie);
//alert(_cuntNum);
//alert(_countNum);
$.cookies.set('productItem',_cartCookie);//设置cookie
$.cookies.set('countNum',_countNum);//设置量的cookie
});

$('#btn').click(function(){
/******************若未选择任何商品返回*****************/
var _listProducts=cartTest.getNewCollection().getProducts();
if(_listProducts.length<0||_listProducts.length==0){
alert('Please select products!');
return;
}
window.location.href="http://www.php1.cn/">                         }); 
                 
            } 
    /**********************购物车类***********************************/ 
     
    /******************实例化对象******************/  
    var productCollections= new productCollection(); 
    var cartTest=new cart(); 
    cartTest.setCollection(productCollections); 
    new shoppingTrolley(); 

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal