通常購物網站中會有一些價格計算，合計或者小計，今天寫一個簡單的計算商品價格的小例子：
先來看看布局：
<body> <ul id="lists"> <li> <input type="button" value="-"> <b>0</b> <input type="button" value="+"> 單價：<em>10.5元</em> 小計：<span>0元</span> </li> <li> <input type="button" value="-"> <b>0</b> <input type="button" value="+"> 單價：<em>12.5元</em> 小計：<span>0元</span> </li> <li> <input type="button" value="-"> <b>0</b> <input type="button" value="+"> 單價：<em>12.5元</em> 小計：<span>0元</span> </li> <li> <input type="button" value="-"> <b>0</b> <input type="button" value="+"> 單價：<em>32.0元</em> 小計：<span>0元</span> </li> </ul> </body>
效果圖如下：
看看js代碼：
<script> window.onload=function(){ var oUl=document.getElementById("lists"); var aLi=oUl.getElementsByTagName("li"); for(var i=0;i<aLi.length;i++){ fn(aLi[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); aBtn[0].onclick=function(){ num1--; if(num1<0){ //z這里判斷若為0，不能再減 num1=0 } oBtxt.innerHTML = num1; oSpan.innerHTML=num1*num2+"元" }; aBtn[1].onclick=function(){ num1++; oBtxt.innerHTML = num1; oSpan.innerHTML=num1*num2+"元" } } } </script>
因為li不止一個，那么需要先實現出一個的效果，然后通過傳參，來解決多個的計算！
好了，今天就到這里，明天繼續！