亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

javascript - 購(gòu)物車的JS底層原理是怎麼樣的？
習(xí)慣沉默
習(xí)慣沉默 2017-05-19 10:36:16
0
3
780

1.購(gòu)物車的底層原理是怎麼樣的？怎樣才能完成統(tǒng)計(jì)？
2.使用函數(shù)傳參做出來前半部分，後半部分該如何實(shí)現(xiàn)？
3.程式碼如下：

     <!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>網(wǎng)頁標(biāo)題</title>
  <style>
    li{margin-top:20px;}
  </style>
  <script>
    window.onload = function (){
        var box = document.getElementById("box");
        var aLi = box.getElementsByTagName("li");
        //var oU = document.getElementsByTagName("u");
        function fn(li){
            var aBtn = li.getElementsByTagName("input");
            var oSpan =li.getElementsByTagName("span")[0];
            var oI = li.getElementsByTagName("i")[0];
            var oB = li.getElementsByTagName("b")[0];

            aBtn[1].onclick = function(){
                oSpan.innerHTML++;
                oB.innerHTML = oSpan.innerHTML*oI.innerHTML;
            }
            aBtn[0].onclick = function(){
                if(oSpan.innerHTML>0){
                    oSpan.innerHTML--;
                }
                oB.innerHTML = oSpan.innerHTML*oI.innerHTML;
                }
            }
        
        for(var i=0;i<aLi.length;i++){
            fn(aLi[i]);
            //
        }
    

    }//js最后執(zhí)行
  </script>
 </head>
 <body>
    <ul id="box">
        <li>
            <input type="button" value="-">
            <span>0</span>
            <input type="button" value="+">
            單價(jià)：<i>10</i>元
            小計(jì)：<b>0</b>元
        </li>
        <li>
            <input type="button" value="-">
            <span>0</span>
            <input type="button" value="+">
            單價(jià)：<i>7.5</i>元
            小計(jì)：<b>0</b>元
        </li> 
        <li>
            <input type="button" value="-">
            <span>0</span>
            <input type="button" value="+">
            單價(jià)：<i>15</i>元
            小計(jì)：<b>0</b>元
        </li> 
        <li>
            <input type="button" value="-">
            <span>0</span>
            <input type="button" value="+">
            單價(jià)：<i>20</i>元
            小計(jì)：<b>0</b>元
        </li> 
        <li>
            <input type="button" value="-">
            <span>0</span>
            <input type="button" value="+">
            單價(jià)：<i>150</i>元
            小計(jì)：<b>0</b>元
        </li>
        
    </ul>
 </body>
</html>

下面那部分的：商品合計(jì)一共n件，其中最貴的商品單價(jià)是a元，總共花費(fèi)了b元的那部分該怎麼寫？
變數(shù)該如何賦值並統(tǒng)計(jì)最後的資料總和？
(程式碼和圖片已貼上)

習(xí)慣沉默
習(xí)慣沉默

全部回覆(3)
淡淡煙草味

我把程式碼全貼出來。你看一下

   <!doctype html>
    <html>
     <head>
      <meta charset="UTF-8">
      <title>網(wǎng)頁標(biāo)題</title>
      <style>
        li{margin-top:20px;}
      </style>
      <script>
        window.onload = function (){
            // var box = document.getElementById("box");
            // var aLi = box.getElementsByTagName("li");
            // //var oU = document.getElementsByTagName("u");
            // function fn(li){
            //     var aBtn = li.getElementsByTagName("input");
            //     var oSpan =li.getElementsByTagName("span")[0];
            //     var oI = li.getElementsByTagName("i")[0];
            //     var oB = li.getElementsByTagName("b")[0];
    
            //     aBtn[1].onclick = function(){
            //         oSpan.innerHTML++;
            //         oB.innerHTML = oSpan.innerHTML*oI.innerHTML;
            //     }
            //     aBtn[0].onclick = function(){
            //         if(oSpan.innerHTML>0){
            //             oSpan.innerHTML--;
            //         }
            //         oB.innerHTML = oSpan.innerHTML*oI.innerHTML;
            //     }
            // }
            
            // for(var i=0;i<aLi.length;i++){
            //     fn(aLi[i]);
            //     counttotal()
            //     //
            // }
    
            //總和變量
            var total = 0;
            //單價(jià)最貴數(shù)組
            var mostexp = [];
            //dom 節(jié)點(diǎn)
            var box = document.getElementById("box");
            var aLi = box.getElementsByTagName("li");
            var idom = box.getElementsByTagName('i');
            //單價(jià)最高
            for(var i=0;i<idom.length;i++){
                mostexp.push(+idom[i].innerHTML)
            }
            document.getElementById('j-exp').innerHTML = Math.max.apply(null,mostexp)
            //綁定加減事件
            function fn(li){
                var oSpan =li.getElementsByTagName("span")[0];
                var oI = li.getElementsByTagName("i")[0];
                var oB = li.getElementsByTagName("b")[0];
                var aBtn = li.getElementsByTagName("input");
    
                for(var i=0,len=aBtn.length;i<len;i++){
                    if(i===0){
                        aBtn[i].onclick = function(){
                            if(oSpan.innerHTML>0){
                                oSpan.innerHTML--;
                            }
                            oB.innerHTML = oSpan.innerHTML*oI.innerHTML;
                            counttotal()
                        }
                    }else{
                        aBtn[i].onclick = function(){
                            oSpan.innerHTML++;
                            oB.innerHTML = oSpan.innerHTML*oI.innerHTML;
                            counttotal()
                        }
                    }
                }    
            }
    
            for(var i=0;i<aLi.length;i++){
                fn(aLi[i]);
            }

            //計(jì)算總和
            function counttotal(){
                total = 0;
                var getb = document.getElementsByTagName('b');    
                for(var i=0,len=getb.length;i<len;i++){
                    total+= +getb[i].innerHTML
                }
                document.getElementById('j-total').innerHTML = total
            }
            
        }//js最后執(zhí)行
      </script>
     </head>
     <body>
        <ul id="box">
            <li>
                <input type="button" value="-">
                <span>0</span>
                <input type="button" value="+">
                單價(jià)：<i>10</i>元
                小計(jì)：<b>0</b>元
            </li>
            <li>
                <input type="button" value="-">
                <span>0</span>
                <input type="button" value="+">
                單價(jià)：<i>7.5</i>元
                小計(jì)：<b>0</b>元
            </li> 
            <li>
                <input type="button" value="-">
                <span>0</span>
                <input type="button" value="+">
                單價(jià)：<i>15</i>元
                小計(jì)：<b>0</b>元
            </li> 
            <li>
                <input type="button" value="-">
                <span>0</span>
                <input type="button" value="+">
                單價(jià)：<i>20</i>元
                小計(jì)：<b>0</b>元
            </li> 
            <li>
                <input type="button" value="-">
                <span>0</span>
                <input type="button" value="+">
                單價(jià)：<i>150</i>元
                小計(jì)：<b>0</b>元
            </li>
            
        </ul>
        <!-- 變化 -->
        <p>單價(jià)最高：<span id="j-exp">0</span>元</p>
        <p>總計(jì)：<span id="j-total">0</span>元</p>
        <!-- 變化 -->
     </body>
    </html>
Peter_Zhu

用物件導(dǎo)向來寫購(gòu)物車再適合不過了，以下是es6程式碼

class Cart{
    constructor(){
        //set，map，array，隨你選
        this.list = [];
    }
    //將商品加入購(gòu)物車，需要判斷購(gòu)物車內(nèi)是否有該商品，
    //以及商品規(guī)格是否相同
    add(goods){}
    //將商品移除購(gòu)物車,這個(gè)key可以是id，名稱等等，你自己決定
    remove(key){}
    //計(jì)算購(gòu)物車總價(jià)，當(dāng)然，最貴的當(dāng)然可以計(jì)算出來了，排個(gè)序就號(hào)了
    computeMoney(){}
    //保存購(gòu)物車，localstorage,服務(wù)器，你自己決定，保存之后還是之前更新界面還是你決定
    save(){}
    //清空購(gòu)物車
    clear(){}
    //購(gòu)物車是否為空
    isEmpty(){}
    //更多邏輯.......
}

最好為每個(gè)方法加上勾子函數(shù)（onSave,onAdd,onRemove....），以實(shí)現(xiàn)重複使用，解耦

phpcn_u1582

原理就是使用者在商品選擇頁點(diǎn)選加號(hào)的時(shí)候從資料來源拿到資料放到一個(gè)新陣列

var data=res.data;
var shopCar=[];
add(index){//點(diǎn)擊加號(hào)的時(shí)候
    shopCar[index]=data[index] 
}

接著得到一個(gè)新的陣列對(duì)象，就是購(gòu)物車清單。
統(tǒng)計(jì)就是把陣列物件裡的價(jià)格欄位相加，至於你用什麼方法相加看你自己喜好,我用的reduce。

如果有減號(hào)，也要有對(duì)應(yīng)的減去運(yùn)算。

最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板