一个简易版购物车
fwxstar 2018-06-08 596次浏览
摘要:
项目预览地址:http://jsrun.net/xWgKp/editHtml<ul id="list">
<li&g...
项目预览地址:http://jsrun.net/xWgKp/edit
Html
<ul id="list"> <li> <input type="button" value="+"/> <strong>0</strong> <input type="button" value="-"/> 单价:<em class="unit">12.5元</em> 合计:<em class="totalMon">0元</em> </li> <li> <input type="button" value="+"/> <strong>0</strong> <input type="button" value="-"/> 单价:<em class="unit">12元</em> 合计:<em class="totalMon">0元</em> </li> <li> <input type="button" value="+"/> <strong>0</strong> <input type="button" value="-"/> 单价:<em class="unit">22.5元</em> 合计:<em class="totalMon">0元</em> </li> <li> <input type="button" value="+"/> <strong>0</strong> <input type="button" value="-"/> 单价:<em class="unit">4.5元</em> 合计:<em class="totalMon">0元</em> </li> <li> <input type="button" value="+"/> <strong>0</strong> <input type="button" value="-"/> 单价:<em class="unit">55元</em> 合计:<em class="totalMon">0元</em> </li> </ul> <div> <p id="summary"> 商品合计共:<em>0</em>件,共花费了:<em>0</em>元<br /> 其中最贵的商品单价是:<em>0</em>元 </p> </div>
Js
var oUl=document.getElementById("list"); var aLilist=oUl.getElementsByTagName("li"); var totalMon=document.getElementsByClassName("totalMon"); var summary=document.getElementById("summary"); var aStrong=document.getElementsByTagName("strong"); var aUnit=document.getElementsByClassName("unit"); var sEm=summary.getElementsByTagName("em"); //数字增减 for(var i=0;i<aUnit.length;i++){ console.log(aUnit[i]); } //总计 function count(){ var pAll = 0; var aPrice = 0; var temp = 0; for(var i=0;i temp ){ temp = parseFloat(aUnit[i].innerHTML); } } } //最贵单价 sEm[2].innerText=temp; //商品合计个数 sEm[0].innerText=pAll; //总计花费 sEm[1].innerText=aPrice; } //数字增减 for(var i=0;i0){ num--; } aStrong.innerText=num; aEmd.innerText=num*parseFloat(aEmp.innerText)+"元"; count(); }; }
- 上一篇:一键替换body文字
- 下一篇:显示类型 隐式类型转换 及NaN详解