JS之函数传参小demo

感觉自学真的是一个困难的过程，没有毅力学得零零散散，学到后面就会很痛苦。

很久没有写代码的感觉就会很生疏，深深的愧疚感。时常怀疑自己到底是不是适合从事程序这个行业，没有人带，自己没有兴趣的话容易半途而废。

最近学到函数这一块感觉能听懂视频上说的，但是自己敲还真是个问题。

跟着妙味课堂完成了这个效果：

界面代码如下：

<ul id="list">
		  <li>
		 	<input type="button" value="-">
		 <strong>0</strong>
		 <input type="button" value="+">
		 单价：<em>22.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>12元</em>
		 小计：<span>0元</span>
		  </li>	
		  
		  <li>
		 	<input type="button" value="-">
		 <strong>0</strong>
		 <input type="button" value="+">
		 单价：<em>10元</em>
		 小计：<span>0元</span>
		  </li>	
		</ul>

JS代码如下：

<script>
var oUl=document.getElementById('list');
var aLi=oUl.getElementsByTagName('li');

for(var i=0;i<aLi.length;i++){
fn1(aLi[i]);//利用for循环重复调用函数来达到简化代码的效果
}

function fn1(oLi){
var aBtn=oLi.getElementsByTagName('input');
var oStrong=oLi.getElementsByTagName('strong')[0];
var oEm=oLi.getElementsByTagName('em')[0];
var oSpan=oLi.getElementsByTagName('span')[0];
var n1=Number(oStrong.innerHTML);//利用Number函数将字符串转为数据类型
var n2=parseFloat(oEm.innerHTML);/利用parseFloat函数将字符串转为浮点数据类型

aBtn[0].onclick=function(){
n1--;
if(n1<0){
n1=0;
}
oStrong.innerHTML=n1;
oSpan.innerHTML=n1*n2+'元';
}

aBtn[1].onclick=function(){
n1++;
oStrong.innerHTML=n1;
oSpan.innerHTML=n1*n2+'元';
}
}
</script>

总结：

如何重用代码：

1.保证HTML代码结构一致，可以通过父级选取子元素。

2.把核心主程序实现，用函数包起来。

3.把每组里不同的值找出来，通过形参传递。