當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
函数传参和实际应用—JS学习笔记2015-6-5（第49天）
生活随笔
收集整理的這篇文章主要介紹了
函数传参和实际应用—JS学习笔记2015-6-5（第49天）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
函數傳遞參數
參數=JS的數據類型=>數字、字符串、布爾、函數、對象、未定義
傳遞有名字的函數，直接傳遞函數名就可以了。?
?
fn1(100, 'px'); function fn1(a, b){// alert( a+b ); // 此時參數是數字和字符串 } fn2('miaov'); fn2('妙味課堂'); function fn2(a){// alert(a.charAt(2)); // 會返回i，課 這里的參數是字符串，擁有字符串的屬性特征，比如這里調用了charAt } 參數是匿名函數的情況：fn3(function(){alert(1);})function fn3(fn){fn(); // 此時返回1; }參數為有名字的函數：function fn4(){alert(4) ;}fn3(fn4);function fn3(fn){fn();}參數是對象：fn5(window,document);function fn5(w,d){w.onload = function(){d.body.innerHTML = 123; // d 就代表document，w代表window };}?
利用參數的傳遞，來判斷數據類型：
fn1(100); fn1('miaov'); fn1(function(){alert(1);});function fn1(a){if(typeof a==='number'&& a===a){// 這里的條件判斷是為了去掉NaNalert(a+20);}else if(typeof a === 'string'){alert(a.charAt(2));}else if(typeof a=== 'function'){a();}} // 每一次自己親手寫代碼會發現產生不必要的錯誤，比如typeof 常常寫成tpye?
實際應用案例：
在項目當中或者頁面當中，發現一些樣式的實現原理是相同的，此時考慮使用函數來實現功能，而用不同的參數來傳遞進去，實現不同的效果即可：
?
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>無標題文檔</title> 6 <style> 7 ul { padding:0; margin:0; } 8 li { list-style:none; } 9 body { background:#333; } 10 .box { width:400px; height:500px; position:relative; background:url(img/loader_ico.gif) no-repeat center #fff; float:left; margin-right:60px; } 11 .box img { width:400px; height:500px; } 12 .box ul { width:40px; position:absolute; top:0; right:-50px; } 13 .box li { width:40px; height:40px; margin-bottom:4px; background:#666; } 14 .box .active { background:#FC3; } 15 .box span { top:0; } 16 .box p { bottom:0; margin:0; } 17 .box p,.box span { position:absolute; left:0; width:400px; height:30px; line-height:30px; text-align:center; color:#fff; background:#000; } 18 </style> 19 <script> 20 21 /* 22 重用代碼： 23 1、盡量保證 HTML 代碼結構一致，可以通過父級選取子元素 24 2、把核心主程序實現，用函數包起來 25 3、把每組里不同的值找出來，通過傳參實現 26 */ 27 28 window.onload = function (){ 29 fnTab( 'pic1', [ 'img/1.png', 'img/2.png', 'img/3.png', 'img/4.png' ], [ '小寵物', '圖片二', '圖片三', '面具' ], 'onclick' ); 30 fnTab( 'pic2', [ 'img/2.png', 'img/3.png', 'img/4.png' ], [ '圖片二', '圖片三', '面具' ], 'onmouseover' ); 31 }; 32 33 function fnTab( id, arrUrl, arrText, evt ){ 34 var oDiv = document.getElementById(id); 35 var oImg = oDiv.getElementsByTagName('img')[0]; 36 var oSpan = oDiv.getElementsByTagName('span')[0]; 37 var oP = oDiv.getElementsByTagName('p')[0]; 38 var oUl = oDiv.getElementsByTagName('ul')[0]; 39 var aLi = oUl.getElementsByTagName('li'); 40 var num = 0; 41 42 for( var i=0; i<arrUrl.length; i++ ){ 43 oUl.innerHTML += '<li></li>'; 44 } 45 46 // 初始化 47 function fnTab(){ 48 oImg.src = arrUrl[num]; 49 oSpan.innerHTML = 1+num+' / '+arrUrl.length; 50 oP.innerHTML = arrText[num]; 51 for( var i=0; i<aLi.length; i++ ){ 52 aLi[i].className = ''; 53 } 54 aLi[num].className = 'active'; 55 } 56 fnTab(); 57 58 for( var i=0; i<aLi.length; i++ ){ 59 aLi[i].index = i; // 索引值 60 aLi[i][evt] = function (){ // evt 因為是參數，動態變化的，所以這里使用中括號括起來; 61 num = this.index; 62 fnTab(); 63 }; 64 } 65 } 66 </script> 67 </head> 68 69 <body> 70 71 <div id="pic1" class="box"> 72 <img src="" /> 73 <span>數量正在加載中……</span> 74 <p>文字說明正在加載中……</p> 75 <ul></ul> 76 </div> 77 78 <div id="pic2" class="box"> 79 <img src="" /> 80 <span>數量正在加載中……</span> 81 <p>文字說明正在加載中……</p> 82 <ul></ul> 83 </div> 84 85 </body> 86 </html> View Code?
轉載于:https://www.cnblogs.com/zhangxg/p/4555793.html
總結
以上是生活随笔為你收集整理的函数传参和实际应用—JS学习笔记2015-6-5（第49天）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 有关 iOS 的开发证书、应用标识、设备
- 下一篇： 关于Java在Linux or Andr