JS实现模拟购物车功能计算商品件数及价钱总和

style部分

 ul>li{
        font-size: 20px;
        margin-bottom: 10px;
}

body部分

 <div style="font-size: 30px;text-align: center;color: brown;">模拟购物车测试案例</div>
    <ul id="list">
        <li>
            <input type="button" value="-">
            <strong>0</strong>
            <input type="button" value="+">
            单价：<em>12.5元</em>&nbsp
            小计：<span>0元</span>
        </li>
        <li>
            <input type="button" value="-">
            <strong>0</strong>
            <input type="button" value="+">
            单价：<em>5.5元</em>&nbsp
            小计：<span>0元</span>
        </li>
        <li>
            <input type="button" value="-">
            <strong>0</strong>
            <input type="button" value="+">
            单价：<em>10.5元</em>&nbsp
            小计：<span>0元</span>
        </li>
        <li>
            <input type="button" value="-">
            <strong>0</strong>
            <input type="button" value="+">
            单价：<em>34.5元</em>&nbsp
            小计：<span>0元</span>
        </li>
        <li>
            <input type="button" value="-">
            <strong>0</strong>
            <input type="button" value="+">
            单价：<em>2.5元</em>&nbsp
            小计：<span>0元</span>
        </li>
    </ul>
    
    <p id="num"><button id="btn">点击计算总共件数</button> 商品总件数：<span>0件</span></p>
    <p id="pic"><button id="btns">点击计算总共价格</button> 商品总价格：<span>0元</span></p>
    <p id="precious">其中最贵的商品单价是：<strong>0元</strong></p>

JavaScript部分

 <script>
        window.onload = function () {
            var oUl = document.getElementById('list');
            var oLi = oUl.getElementsByTagName("li");
            var oStrong = oUl.getElementsByTagName("strong");
            var oSpan = oUl.getElementsByTagName('span');
            var oEm = oUl.getElementsByTagName('em');
            var oNum = document.getElementById("num");
            var oPic = document.getElementById("pic");
            var oPrecious = document.getElementById("precious");
            var oNumSpan = oNum.getElementsByTagName("span")[0];
            var oPicSpan = oPic.getElementsByTagName("span")[0];
            var oPreStrong = oPrecious.getElementsByTagName("strong")[0];
            var oBtn = document.getElementById("btn");
            var oBtns = document.getElementById("btns");
            var sum = 0;
            var emMax = 0;
             for (var i = 0; i < oEm.length; i++) {
                //最贵的商品单价
                if (parseFloat(oEm[i].innerHTML) > emMax) {
                    emMax = parseFloat(oEm[i].innerHTML);
                }
                oPreStrong.innerHTML = emMax + '元';
            }
            // fn(oLi[0]);
            // fn(oLi[1]);
            // fn(oLi[2]);
            // fn(oLi[3]);
            // fn(oLi[4]);
             //调用fn1（）函数实现商品数量的选取
            for(var i=0; i<oLi.length; i++){
                fn1(oLi[i]);
            }
            //添加点击事件获取总的商品数量
            oBtn.onclick = function () {
                 for (var i = 0; i < oStrong.length; i++) {
                    var a = Number(oStrong[i].innerHTML);
                    console.log(a);
                    sum += a;
                    oNumSpan.innerHTML = sum + '件';
                }
                sum = 0;
            }
            //添加点击事件获取总的价钱
            oBtns.onclick = function () {
                for (var i = 0; i < oSpan.length; i++) {
                    var a = parseFloat(oSpan[i].innerHTML);
                    sum += a;
                   oPicSpan.innerHTML = sum + '元';
                }
                sum = 0;
            }
            function fn1(oLi) {
                var oInput = oLi.getElementsByTagName("input");
                var oStrong = oLi.getElementsByTagName("strong")[0];
                var oEm = oLi.getElementsByTagName("em")[0];
                var oSpan = oLi.getElementsByTagName("span")[0];
                var n1 = Number(oStrong.innerHTML);
                var n2 = parseFloat(oEm.innerHTML);
                oInput[0].onclick = function () {
                    if (n1 > 0) {
                        n1--;
                    }
                    // 方案二
                    // n1--;
                    // if(n1<0){
                    //   n1 = 0;
                    // }
                    oStrong.innerHTML = n1;
                    oSpan.innerHTML = n1 * n2 + "元";
                }
                oInput[1].onclick = function () {
                    n1++;
                    oStrong.innerHTML = n1;
                    oSpan.innerHTML = n1 * n2 + "元";
                }
            }
        }
    </script>