當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
函数传参之商品价格计算—JS学习笔记2015-6-6（第50天）
生活随笔
收集整理的這篇文章主要介紹了
函数传参之商品价格计算—JS学习笔记2015-6-6（第50天）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
經常我們可以看到很多網站會有多個相同功能的模塊，比如淘寶首頁的輪播，比如新浪首頁的tab切換；
那么可以看出這些地方在HTML結構上是類似的，所以我們可以考慮用一塊功能代碼去實現，而不同是僅僅是傳遞參數的不同；
例如：
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> 48 商品合計共：<div id='cou'>0件</div>，共花費了：0元<br /> 49 其中最貴的商品單價是：0元 50 </p> 51 52 53 <script> 54 var oUl = document.getElementById('list'); 55 var aLi = oUl.getElementsByTagName('li'); 56 57 58 // fn1(aLi[0]); 59 // fn1(aLi[1]); 60 // fn1(aLi[2]); 61 // fn1(aLi[3]); 看到這種情形，應該想到使用for循環來實現 62 for(var i=0; i<aLi.length; i++){ 63 fn1(aLi[i]); 64 } 65 66 function fn1(oLi){ //這里面使用，或者用其他參數a,b,c都可以，這個參數是自己命名的 67 68 var aBtn = oLi.getElementsByTagName('input'); // 因為這里面有2個input，所以使用了aBtn,且后面沒有加上相應的下標值； 69 var oStrong = oLi.getElementsByTagName('strong')[0]; 70 var oSpan = oLi.getElementsByTagName('span')[0]; 71 var oEm = oLi.getElementsByTagName('em')[0]; // 這里面加上[0]；是基于該父級元素下，只有這一個em標簽 72 var n1 = Number(oStrong.innerHTML); // "這里需要注意的是從HTML中獲取的值都是字符串類型，為了后面的運算，以及避免產生不必要的問題，這里進行顯示類型轉換" 73 var n2 = parseFloat(oEm.innerHTML); 74 75 aBtn[0].onclick = function(){ 76 n1--; 77 if(n1<=0){ 78 n1=0; 79 } 80 oStrong.innerHTML = n1; 81 oSpan.innerHTML = n1*n2+"元"; 82 }; 83 aBtn[1].onclick = function(){ 84 n1++; 85 oStrong.innerHTML = n1; 86 oSpan.innerHTML = n1*n2+"元"; 87 }; 88 } 89 90 // 下面是比較規范的命名： 91 // var oUl = document.getElementById('list'); 92 // var aLi = oUl.getElementsByTagName('li'); 93 94 // // fnCount ( aLi[0] ); 95 // for ( var i=0; i<aLi.length; i++ ) { 96 // fnCount ( aLi[i] ); 97 // } 98 99 // function fnCount ( li ) { // 注意看這里的函數名命名 100 // var aBtn = li.getElementsByTagName ('input'); 101 // var oStrong = li.getElementsByTagName ('strong')[0]; 102 // var oEm = li.getElementsByTagName ('em')[0]; 103 // var oSpan = li.getElementsByTagName ('span')[0]; 104 // var n = oStrong.innerHTML; // 產品的數量 105 // var price = parseFloat(oEm.innerHTML); // 產品的單價命名 106 107 // aBtn[0].onclick = function () { 108 // if ( n > 0 ) { 109 // n--; 110 // } 111 // oStrong.innerHTML = n; 112 // oSpan.innerHTML = n*price + '元'; 113 // }; 114 // aBtn[1].onclick = function () { 115 // n++; 116 // oStrong.innerHTML = n; 117 // oSpan.innerHTML = n*price + '元'; 118 // }; 119 // } 120 // }; 121 122 </script> 123 124 </body> 125 </html> View Code?
今天這段自己敲的代碼有2個收獲：
第一：弄清除，參數的命名是自定的，也就是說這里面的oLi,也可以是其他自己起的名字，比如a，b，c都可以；
第二：動態獲取元素的ByTagName方法，其實后面是否使用到下標，就看該HTML機構中，是否有多個相同的元素，比如這里面的按鈕，就有2個，所以aBtn，a代表數組，不止一個，后面沒有使用下標；
var aBtn = a.getElementsByTagName('input');
而其他該結構中只有一個的HTML元素，這里我們要調用它則直接使用下標了，比如這里的
var oStrong = a.getElementsByTagName('strong')[0];
var oSpan = a.getElementsByTagName('span')[0];
var oEm = a.getElementsByTagName('em')[0];
都是這種情況
轉載于:https://www.cnblogs.com/zhangxg/p/4557526.html
總結
以上是生活随笔為你收集整理的函数传参之商品价格计算—JS学习笔记2015-6-6（第50天）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 使用正则表达式的技巧
- 下一篇： Spring源码解析——如何阅读源码