标签：
老师的课后作业练习，看代码（最贵价格那个没有实现）：
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>
标签：
原文地址：http://www.cnblogs.com/zhangxg/p/4559941.html
