购物车

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <p>
            <button type="button">-</button>
            <span>0</span>
            <button type="button">+</button>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            单价 : <strong>24</strong>元
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            小计 : <i>0</i>元
        </p>
        <p>
            <button type="button">-</button>
            <span>0</span>
            <button type="button">+</button>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            单价 : <strong>34</strong>元
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            小计 : <i>0</i>元
        </p>
        <p>
            <button type="button">-</button>
            <span>0</span>
            <button type="button">+</button>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            单价 : <strong>74</strong>元
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            小计 : <i>0</i>元
        </p>
        <p>
            <button type="button">-</button>
            <span>0</span>
            <button type="button">+</button>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            单价 : <strong>54</strong>元
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            小计 : <i>0</i>元
        </p>
        <hr>
        <div id="box">
            总件数：<span>0</span>个
            最高单价：<span>0</span>元
            总计：<span>0</span>元
        </div>
        <script type="text/javascript">
            var aP = document.getElementsByTagName('p');
            var oBox = document.getElementById('box');
            var oCounts = oBox.getElementsByTagName('span')[0];
            var oPrice = oBox.getElementsByTagName('span')[1];
            var oTotal = oBox.getElementsByTagName('span')[2];
            for(var i = 0;i <aP.length;i++){
                tab(aP[i]);
            }
            var max = 0;
            function tab(obj){
                var oBtn1 = obj.getElementsByTagName('button')[0];
                var oBtn2 = obj.getElementsByTagName('button')[1];
                var oSpan = obj.getElementsByTagName('span')[0];
                var oStrong = obj.getElementsByTagName('strong')[0];
                var oI = obj.getElementsByTagName('i')[0];
                
            
            oBtn1.onclick = function(){
                    if(oSpan.innerHTML == '0'){
                        return;
                    }
                    oSpan.innerHTML = Number(oSpan.innerHTML) - 1;
                    // 计算小计
                    oI.innerHTML = oSpan.innerHTML * oStrong.innerHTML;
                    oCounts.innerHTML = Number(oCounts.innerHTML)-1;
                    oTotal.innerHTML = (Number(oTotal.innerHTML) -Number(oStrong.innerHTML)).toFixed(2);
                    findMax();
                    oPrice.innerHTML = max;
                }
                oBtn2.onclick = function(){
                    oSpan.innerHTML = Number(oSpan.innerHTML) + 1;
                    // 计算小计
                    oI.innerHTML = oSpan.innerHTML * oStrong.innerHTML;
                    oCounts.innerHTML = Number(oCounts.innerHTML)+1;
                    oTotal.innerHTML = (Number(oTotal.innerHTML)  + Number(oStrong.innerHTML)).toFixed(2);
                    if(max < Number(this.nextElementSibling.innerHTML)){
                        max = Number(this.nextElementSibling.innerHTML);
                        oPrice.innerHTML = max;
                    }
                }
                function findMax(){
                    arr= [];
                    max = 0;
                    for(var i = 0;i<aP.length;i++){
                        var oSpan0 = aP[i].getElementsByTagName('span')[0];
                        var oStrong0 = aP[i].getElementsByTagName('strong')[0];
                        if(Number(oSpan0.innerHTML) >0 ){
                            arr.push(Number(oStrong0.innerHTML));
                        }
                    }
                    for(var i = 0;i<arr.length;i++){
                        if(max<arr[i]){
                            max = arr[i];
                        }
                    }
                }
            }
        </script>
    </body>
</html>
推荐阅读更多精彩内容
