通常购物网站中会有一些价格计算，合计或者小计，今天写一个简单的计算商品价格的小例子：
先来看看布局：
<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不止一个，那么需要先实现出一个的效果，然后通过传参，来解决多个的计算！
好了，今天就到这里，明天继续！