婷婷国产成人精品视频,欧美xxxx做受欧美

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

javascript - What is the underlying principle of JS for shopping cart?

習(xí)慣沉默 2017-05-19 10:36:16

779

1. What is the underlying principle of the shopping cart? How can the statistics be completed?
2. Use function parameters to create the first half. How to implement the second half?
3. The code is as follows:

     <!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="+">
            單價：<i>10</i>元
            小計：<b>0</b>元
        </li>
        <li>
            <input type="button" value="-">
            <span>0</span>
            <input type="button" value="+">
            單價：<i>7.5</i>元
            小計：<b>0</b>元
        </li> 
        <li>
            <input type="button" value="-">
            <span>0</span>
            <input type="button" value="+">
            單價：<i>15</i>元
            小計：<b>0</b>元
        </li> 
        <li>
            <input type="button" value="-">
            <span>0</span>
            <input type="button" value="+">
            單價：<i>20</i>元
            小計：<b>0</b>元
        </li> 
        <li>
            <input type="button" value="-">
            <span>0</span>
            <input type="button" value="+">
            單價：<i>150</i>元
            小計：<b>0</b>元
        </li>
        
    </ul>
 </body>
</html>

The following part: There are n pieces of products in total, the unit price of the most expensive product is a yuan, and how to write the part that costs b yuan in total?
How to assign values ??to variables and count the final sum of data?
(code and pictures have been pasted)

習(xí)慣沉默

reply all(3)

淡淡煙草味2017-05-19 10:38:16 3 floor

I’ll post all the code. Take a look

   <!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;
            //單價最貴數(shù)組
            var mostexp = [];
            //dom 節(jié)點(diǎn)
            var box = document.getElementById("box");
            var aLi = box.getElementsByTagName("li");
            var idom = box.getElementsByTagName('i');
            //單價最高
            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]);
            }

            //計算總和
            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="+">
                單價：<i>10</i>元
                小計：<b>0</b>元
            </li>
            <li>
                <input type="button" value="-">
                <span>0</span>
                <input type="button" value="+">
                單價：<i>7.5</i>元
                小計：<b>0</b>元
            </li> 
            <li>
                <input type="button" value="-">
                <span>0</span>
                <input type="button" value="+">
                單價：<i>15</i>元
                小計：<b>0</b>元
            </li> 
            <li>
                <input type="button" value="-">
                <span>0</span>
                <input type="button" value="+">
                單價：<i>20</i>元
                小計：<b>0</b>元
            </li> 
            <li>
                <input type="button" value="-">
                <span>0</span>
                <input type="button" value="+">
                單價：<i>150</i>元
                小計：<b>0</b>元
            </li>
            
        </ul>
        <!-- 變化 -->
        <p>單價最高：<span id="j-exp">0</span>元</p>
        <p>總計：<span id="j-total">0</span>元</p>
        <!-- 變化 -->
     </body>
    </html>

Like +0

Add Reply

Peter_Zhu2017-05-19 10:38:16 2 floor

It’s perfect to write a shopping cart using object-oriented methods. The following is the es6 code

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

It is best to add hook functions (onSave, onAdd, onRemove....) to each method to achieve reuse and decoupling

Like +0

Add Reply

phpcn_u15822017-05-19 10:38:16 1 floor

The principle is that when the user clicks the plus sign on the product selection page, the data is obtained from the data source and put into a new array

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

Then get a new array object, which is the shopping cart list.
Statistics is to add up the price fields in the array object. As for the method you use to add up, it depends on your preference. I use reduce.

If there is a minus sign, there must also be a corresponding subtraction operation.

Like +0

Add Reply