当前位置: 首页 > 前端技术 > 正文

JavaScript传参实例:商品价格计算

我们使用函数传参是为了重用代码,应当遵循以下原则:
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; i 0 && 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>

JavaScript传参实例:商品价格计算:等您来吐槽!

JavaScript传参实例:商品价格计算:等您坐沙发呢!

发表评论

您必须 [ 登录 ] 才能发表留言!