我们使用函数传参是为了重用代码,应当遵循以下原则:
1、尽量保证 HTML 代码结构一致,可以通过父级选取子元素;
2、把核心主程序实现,用函数包起来;
3、把每组里不同的值找出来,通过传参实现。
例:商品价格计算
HTML布局
<ul id="list"> <li> <input type="button" value="-" /> <strong>0</strong> <input type="button" value="+" /> 单价:<em>16.5元</em> 小计:<span>0元</span> </li> <li> <input type="button" value="-" /> <strong>0</strong> <input type="button" value="+" /> 单价:<em>10.5元</em> 小计:<span>0元</span> </li> <li> <input type="button" value="-" /> <strong>1</strong> <input type="button" value="+" /> 单价:<em>8.5元</em> 小计:<span>0元</span> </li> <li> <input type="button" value="-" /> <strong>0</strong> <input type="button" value="+" /> 单价:<em>8元</em> 小计:<span>0元</span> </li> <li> <input type="button" value="-" /> <strong>0</strong> <input type="button" value="+" /> 单价:<em>14.5元</em> 小计:<span>0元</span> </li> </ul> <p></p>
js实现价格计算
<script> window.onload = function () { var oUl = document.getElementById('list'); var aLi = oUl.getElementsByTagName('li'); var aP = document.getElementsByTagName('p'); var num=0; //商品总数 var money=0; //总价格 //函数传参 for ( var i=0; i0 && num >0 ) { n--; num--; money -= price; } fun1(); }; aBtn[1].onclick = function () { n++; num++; money += price; fun1(); }; }; function fun2(li){ var oStrong = li.getElementsByTagName ('strong')[0]; var oEm = li.getElementsByTagName ('em')[0]; var n = Number(oStrong.innerHTML); // 数量'0' var price = parseFloat(oEm.innerHTML); // 单价 12.5 }; }; </script>
评论前必须登录!
注册