原生js計算價格並合計總價

在昨天的案例的基礎上，若是想要計算總價，那么就要把每一個li的小計都要加一遍，所有要循環每個li，並且要獲取到每個li里的小計的值。

要計算出商品的總件數，然后還有總計帶的價格，那么js應該這樣寫：

<script>
    window.onload=function(){
        var oUl=document.getElementById("lists");
        var aLis=oUl.getElementsByTagName("li");
        var aPt=document.getElementsByTagName("p")[0];
        var aBt=aPt.getElementsByTagName("b")[0];
        var aSpant=aPt.getElementsByTagName("span")[0];
        var aStrong=aPt.getElementsByTagName("strong")[0];
        for(var i=0;i<aLis.length;i++){
            fn(aLis[i]);
        }
        function fn(aLi){
            var aBtn=aLi.getElementsByTagName("input");
            var oEm=aLi.getElementsByTagName("em")[0];
            var oSpan=aLi.getElementsByTagName("span")[0];
            var oBtxt=aLi.getElementsByTagName("b")[0];
            var num1=Number(oBtxt.innerHTML);
            var num2=parseFloat(oEm.innerHTML);

            //合計總價，必然要相加所有的小計
            function fn1(){
                var temp=0;//定義一個臨時變量，用來儲存所加過的小計
                var emMax=0;//定義一個臨時變量，用來比較單價的大小
                for(var i=0;i<aLis.length;i++){
                    var spans=aLis[i].getElementsByTagName("span")[0];//獲取到所有li的小計
                    var em=aLis[i].getElementsByTagName("em")[0];
                    temp=temp+parseFloat(spans.innerHTML);//合計就是所有小計相加的結果，因為有小數所以要用parseFloat

                    if(parseFloat(em.innerHTML)>emMax){//最大的那個單價值
                        emMax=parseFloat(em.innerHTML);
                    }
                }
                aSpant.innerHTML=temp;
                aStrong.innerHTML=emMax;
            }fn1();

            //點擊“-”按鈕
            aBtn[0].onclick=function(){
                num1--;
                if(num1<0){
                    num1=0
                }
                oBtxt.innerHTML = num1;//0
                oSpan.innerHTML=num1*num2+"元";
                fn1();//調用合計之后的值

            };
            //點擊“+”按鈕
            aBtn[1].onclick=function(){
                num1++;
                oBtxt.innerHTML = num1;//0
                oSpan.innerHTML=num1*num2+"元";
                fn1();//調用合計之后的值

            }
        }


    }

</script>

無論點擊任何按鈕都要循環每個li里的小計並且要相加，所以考慮到代碼的重用，那么就要把這段代碼定義為函數，方便任何按鈕點擊 時調用。

總結：

所有小計相加，就要臨時有個變量來儲存每個小計相加的結果然后繼續加下一個小計，上面案例的temp就是這個作用；

比大小，也要定一個臨時變量，給其賦值，並讓其與自己相比，小的忽略，大的就讓其等於這個變量，上面例子中emMax就是這個作用。

好了，今天就到這里，明天繼續！加油！