函数传参课后练习—JS学习笔记2015-6-7（第51天）

老师的课后作业练习，看代码（最贵价格那个没有实现）：
  1 <!DOCTYPE HTML>
  2 <html>
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5 <title>J函数传参——商品价格计算</title>
  6 </head>
  7 
  8 <body>
  9 <ul id="list">
 10     <li>
 11       <input type="button" value="-" />
 12     <strong>0</strong>
 13       <input type="button" value="+" />
 14     单价：<em>12.5元</em>
 15     小计：<span>0元</span>
 16   </li>
 17     <li>
 18       <input type="button" value="-" />
 19     <strong>0</strong>
 20       <input type="button" value="+" />
 21     单价：<em>10.5元</em>
 22     小计：<span>0元</span>
 23   </li>
 24     <li>
 25       <input type="button" value="-" />
 26     <strong>0</strong>
 27       <input type="button" value="+" />
 28     单价：<em>8.5元</em>
 29     小计：<span>0元</span>
 30   </li>
 31     <li>
 32       <input type="button" value="-" />
 33     <strong>0</strong>
 34       <input type="button" value="+" />
 35     单价：<em>8元</em>
 36     小计：<span>0元</span>
 37   </li>
 38     <li>
 39       <input type="button" value="-" />
 40     <strong>0</strong>
 41       <input type="button" value="+" />
 42     单价：<em>14.5元</em>
 43     小计：<span>0元</span>
 44   </li>
 45 </ul>
 46 
 47 <p>商品合计共：<big id='sum'>0</big>件</p>
 48 <p>共花费了：<big id='totalSpend'>0</big>元</p>
 49 <p>其中最贵的商品单价是：<big id='maxPrice'>0</big>元</p>
 50 
 51 
 52 
 53 <script>
 54     var oUl = document.getElementById('list');
 55     var aLi = oUl.getElementsByTagName('li');
 56     var oSum = document.getElementById('sum');
 57     var oTotal = document.getElementById('totalSpend');
 58     var oMaxPrice = document.getElementById('maxPrice');    
 59     var aPack = document.getElementsByTagName('strong');
 60     var aSpan = document.getElementsByTagName('span');
 61     var aEm = document.getElementsByTagName('em');
 62     
 63     // var num = 0; 如果是写在外面就不可以，这时候cunses函数里面是访问不到外面的num，所以就累加了这时候返回的值就是点击后的累加值。
 64  
 65     function census(){
 66         var num = 0; // 这里要写在函数体内，oSum才生效
 67         var tt = 0;
 68         var max = 0;
 69         for(var j=0; j<aPack.length; j++){
 70             
 71             num += Number(aPack[j].innerHTML); // 为什么这里是加等于，而减去按钮也实现了效果？？
 72             tt += parseFloat(aSpan[j].innerHTML);
 73             if(tt!=0){ // tt不等于0，表明确实买了
 74                 max = parseFloat(aEm[j].innerHTML); 
 75             }
 76         };
 77         oSum.innerHTML = num;
 78         oTotal.innerHTML = tt;
 79         oMaxPrice.innerHTML = max;
 80     }
 81     
 82     // fnCount ( aLi[0] );
 83     for ( var i=0; i<aLi.length; i++ ) {
 84         fnCount ( aLi[i] );
 85     }
 86     
 87     function fnCount ( oli ) {  
 88         var aBtn = oli.getElementsByTagName ('input');
 89         var oStrong = oli.getElementsByTagName ('strong')[0];
 90         var oEm = oli.getElementsByTagName ('em')[0];
 91         var oSpan = oli.getElementsByTagName ('span')[0];
 92         var n = oStrong.innerHTML;            // 产品的数量
 93         var price = parseFloat(oEm.innerHTML);            // 产品的单价命名
 94         
 95         aBtn[0].onclick = function () {
 96             if ( n > 0 ) {
 97                 n--;
 98             }
 99             oStrong.innerHTML = n;
100             oSpan.innerHTML = n*price + '元';
101             census();
102         };
103         aBtn[1].onclick = function () {
104             n++;
105             oStrong.innerHTML = n;
106             oSpan.innerHTML = n*price + '元';
107             census();
108         };
109        
110        
111     }
112 
113 </script>
114 
115 </body>
116 </html>
View Code