国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

javascript - Native Js+localStorage pour obtenir un effet panier
高洛峰
高洛峰 2017-06-12 09:26:38
0
1
1125

Problèmes?:?
1. Lors de la première ouverture de la page, puisqu'il n'y a pas de stockage local, les données ne seront pas récupérées par 1 et ne seront pas ajoutées au panier. sera ajouté et 2 articles seront ajoutés au panier à la fois. Les le?ons suivantes s'ajouteront et soustrairont normalement
2. Lors de l'ajout du premier article de chaque produit, il ne sera pas ajouté au panier lorsque le deuxième article. est ajouté.

Effet d'affichage : https://ityanxi.github.io/seg...
Adresse du code : https://github.com/ityanxi/se...

code js?:

//獲取元素
function $(id){
    return document.getElementById(id);
}
var table =$('cartTable'); // 購(gòu)物車表格
var tr = table.children[1].rows; //行
var priceTotal = $('priceTotal'); //總計(jì)
var selectedTotal =$('selectedTotal'); //已選商品數(shù)目容器
var selectedViewList =  $('selectedViewList'); //浮層已選商品列表容器
var foot =  $('foot');
    
     
    
utils = {
    setParam : function (name,value){  //存儲(chǔ)數(shù)據(jù)
        localStorage.setItem(name,value)  
    },  
    getParam : function(name){  //獲取數(shù)據(jù)
        return localStorage.getItem(name)  
    }  
}  

product={  
    name:"",  
    num:0,  
    price:0.00,  
};  

orderdetail={  
    username:"",  
    phone:"",  
    address:"",  
    zipcode:"",  
    totalNumber:0,  
    totalAmount:0.00      
}  

cart = {  
    //向購(gòu)物車中添加商品  
    addproduct: function (product) {  
        var ShoppingCart = utils.getParam("ShoppingCart");  //獲取數(shù)據(jù)
            
        if (ShoppingCart == null || ShoppingCart == "") {  
            //第一次加入商品  
            var jsonstr = { "productlist": [{ 
                                            "name": product.name, //商品名稱
                                            "num": product.num, //商品數(shù)量
                                            "price": product.price}], //商品單價(jià)
                            "totalNumber": product.num, //單一商品總數(shù)
                            "totalAmount": (product.price * product.num) //商品總價(jià)
            };
            
            
            //JSON.stringify(jsonstr)   //將json對(duì)象轉(zhuǎn)換成字符串.
            utils.setParam("ShoppingCart", "'" + JSON.stringify(jsonstr));  //存儲(chǔ)數(shù)據(jù)
           
             
        } else {  
            //JSON.parse(ShoppingCart.substr(1, ShoppingCart.length))//對(duì)json數(shù)據(jù)的解釋    將字符串變成json對(duì)象
            var jsonstr = JSON.parse(ShoppingCart.substr(1, ShoppingCart.length));  
            var productlist = jsonstr.productlist;  
            var result = false;  
            //查找購(gòu)物車中是否有該商品  
            for (var i in productlist) {  
                if (productlist[i].name == product.name) {  
                    productlist[i].num = parseInt(productlist[i].num) + parseInt(product.num);  
                    result = true;  
                }  
            }  
            if (!result) {  
                //沒(méi)有該商品就直接加進(jìn)去  
                productlist.push({"name": product.name, "num": product.num, "price": product.price });  
            }  
            //重新計(jì)算總價(jià)  
            jsonstr.totalNumber = parseInt(jsonstr.totalNumber) + parseInt(product.num);  
            jsonstr.totalAmount = parseFloat(jsonstr.totalAmount) + (parseInt(product.num) * parseFloat(product.price));  
           
            //保存購(gòu)物車  
            utils.setParam("ShoppingCart", "'" + JSON.stringify(jsonstr));  
          
        }  
       
       
       
    },  
    //修改給買商品數(shù)量  
    updateproductnum: function (name, num) {  
        console.log(name,'+++:',num);
        var ShoppingCart = utils.getParam("ShoppingCart");  
        var jsonstr = JSON.parse(ShoppingCart.substr(1, ShoppingCart.length));  
        console.log(jsonstr);
        var productlist = jsonstr.productlist;  
  
        for (var i in productlist) {  
            if (productlist[i].name == name) {  
                jsonstr.totalNumber = parseInt(jsonstr.totalNumber) + (parseInt(num) - parseInt(productlist[i].num));  
                console.log(parseInt(jsonstr.totalNumber),parseInt(productlist[i].num));
                jsonstr.totalAmount = parseFloat(jsonstr.totalAmount) + ((parseInt(num) * parseFloat(productlist[i].price)) - parseInt(productlist[i].num) * parseFloat(productlist[i].price));
                productlist[i].num = parseInt(num);  
                orderdetail.totalNumber = jsonstr.totalNumber;  
                orderdetail.totalAmount = jsonstr.totalAmount;  
                
                selectedTotal.innerHTML= orderdetail.totalNumber;
                priceTotal.innerHTML=(orderdetail.totalAmount).toFixed(2);//保留兩位小數(shù)
                
                utils.setParam("ShoppingCart", "'" + JSON.stringify(jsonstr)); 
                
                console.log("'"+ JSON.stringify(jsonstr))
                return;  
            }  
        }  
        
    },  
    //獲取購(gòu)物車中的所有商品  
    getproductlist: function () {  
        var ShoppingCart = utils.getParam("ShoppingCart");  
        var jsonstr = JSON.parse(ShoppingCart.substr(1, ShoppingCart.length));  
        var productlist = jsonstr.productlist;  
        orderdetail.totalNumber = jsonstr.totalNumber;  
        orderdetail.totalAmount = jsonstr.totalAmount;  
        return productlist;  
    },  
    //判斷購(gòu)物車中是否存在商品  
    existproduct: function (name) {  
        var result = false;  
        var ShoppingCart = utils.getParam("ShoppingCart");  
        if (ShoppingCart != null) {  
            var jsonstr = JSON.parse(ShoppingCart.substr(1, ShoppingCart.length));  
            var productlist = jsonstr.productlist;  
            for (var i in productlist) {  
                if (productlist[i].name == name) {  
                    result = true;  
                }  
            }  
        }  
        return result;  
    },  
    //刪除購(gòu)物車中商品  
    deleteproduct: function (name) {  
        var ShoppingCart = utils.getParam("ShoppingCart");  
        var jsonstr = JSON.parse(ShoppingCart.substr(1, ShoppingCart.length));  
        var productlist = jsonstr.productlist;  
        var list = [];  
        for (var i in productlist) {  
            if (productlist[i].name == name) {  
                jsonstr.totalNumber = parseInt(jsonstr.totalNumber) - parseInt(productlist[i].num);  
                jsonstr.totalAmount = parseFloat(jsonstr.totalAmount) - parseInt(productlist[i].num) * parseFloat(productlist[i].price);  
            } else {  
                list.push(productlist[i]);  
            }  
        }  
        jsonstr.productlist = list;  
        orderdetail.totalNumber = jsonstr.totalNumber;  
        orderdetail.totalAmount = jsonstr.totalAmount;  
        utils.setParam("ShoppingCart", "'" + JSON.stringify(jsonstr));  
    }  
};  
    loadData()
    //加載數(shù)據(jù)
    function loadData(){
        if(localStorage.length>0){//如果有存儲(chǔ)數(shù)據(jù) 則獲取并渲染
            var productlist=cart.getproductlist();//取出購(gòu)物車商品  
            var countInput = table.getElementsByClassName('count-input'); //數(shù)目input
            var goods=table.getElementsByClassName('goods');
            var names=[];
            for(var i=0;i<goods.length;i++){
                //console.log(goods[i].children[1].innerHTML);
                names.push(goods[i].children[1].innerHTML);
            }
            
            //var names=goods.children[1];
               //console.log(productlist);
             //console.log(names);
            
            for(var i=0;i<names.length;i++){
                for(var j=0;j<productlist.length;j++){
                    if(names[i]==productlist[j].name){
                        //console.log(i)
                        countInput[i].value=productlist[j].num
                    }
                    
                }
            }
            
               for(var i=0;i<productlist.length;i++){
                   console.log(productlist[i]);
                   
                   var str='    名稱:'+productlist[i].name+'        數(shù)量:'+productlist[i].num+'        小計(jì):'+(parseInt(product.num) * parseFloat(product.price))
                   console.log(str);
               }
            
            selectedTotal.innerHTML= orderdetail.totalNumber;
             priceTotal.innerHTML=(orderdetail.totalAmount).toFixed(2);//保留兩位小數(shù)
        }else{
            return
        }
    }
    
  
    
    //為每行元素添加事件
    for (var i = 0; i < tr.length; i++) {
        //將點(diǎn)擊事件綁定到tr元素
        tr[i].onclick = function (e) {
            var e = e || window.event;
            var el = e.target || e.srcElement; //通過(guò)事件對(duì)象的target屬性獲取觸發(fā)元素
            var cls = el.className; //觸發(fā)元素的class
            var countInout = this.getElementsByTagName('input')[0]; // 數(shù)目input
            var value = parseInt(countInout.value); //數(shù)目
            var goods=this.getElementsByClassName('goods')[0];
            var name=goods.children[1].innerHTML;
           
           
            var price=this.getElementsByClassName('price')[0].innerHTML;
            //通過(guò)判斷觸發(fā)元素的class確定用戶點(diǎn)擊了哪個(gè)元素
            switch (cls) {
                case 'add': //點(diǎn)擊了加號(hào)
                    countInout.value = value + 1;
                    break;
                case 'reduce': //點(diǎn)擊了減號(hào)
                    if (value > 0) {
                       countInout.value = value - 1;
                    }
                    break;
            }
            
           
            var product =  
                {  
                         //屬性名用引號(hào)括起來(lái),屬性間由逗號(hào)隔開  
                    'name': name,  
                    'num':countInout.value,  
                    'price':price  
                };  
            console.log(product.num);
            
            if(cart.existproduct(product.name)){
                cart.updateproductnum(product.name,product.num);
            }else{
                
                cart.addproduct(product)
            }
            
           //loadData()
        }
    }
    
    


function remove1(){
        localStorage.removeItem("ShoppingCart")//刪除變量名為key的存儲(chǔ)變量 
    }
高洛峰
高洛峰

擁有18年軟件開發(fā)和IT教學(xué)經(jīng)驗(yàn)。曾任多家上市公司技術(shù)總監(jiān)、架構(gòu)師、項(xiàng)目經(jīng)理、高級(jí)軟件工程師等職務(wù)。 網(wǎng)絡(luò)人氣名人講師,...

répondre à tous(1)
滿天的星座

Donnez-moi une idée. Une fois la page chargée, déterminez si les produits qui n'ont pas été entrés dans le panier doivent être ajoutés au stockage local. Si la valeur est définie sur 0, elle ne sera pas affichée.

Cela ne fonctionne pas pour la première fois, mais cela fonctionne pour la deuxième fois. Essayez d'imprimer les informations entre les deux fois pour voir où se situe le problème. L'ajout d'un jugement peut le résoudre. Si cela ne fonctionne pas, vous pouvez le résoudre. jugez si c'est la première fois

.

Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal