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

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&load = function () {var oUl = ElementById('list');var oLi = ElementsByTagName("li");var oStrong = ElementsByTagName("strong");var oSpan = ElementsByTagName('span');var oEm = ElementsByTagName('em');var oNum = ElementById("num");var oPic = ElementById("pic");var oPrecious = ElementById("precious");var oNumSpan = ElementsByTagName("span")[0];var oPicSpan = ElementsByTagName("span")[0];var oPreStrong = ElementsByTagName("strong")[0];var oBtn = ElementById("btn");var oBtns = ElementById("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]);}//添加点击事件获取总的商品数量lick = 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;}//添加点击事件获取总的价钱lick = 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 = ElementsByTagName("input");var oStrong = ElementsByTagName("strong")[0];var oEm = ElementsByTagName("em")[0];var oSpan = ElementsByTagName("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>