当前位置：
凯发ag旗舰厅登录网址下载 >
前端技术
> javascript
>内容正文
javascript
函数传参和实际应用—js学习笔记2015-凯发ag旗舰厅登录网址下载
凯发ag旗舰厅登录网址下载
收集整理的这篇文章主要介绍了
函数传参和实际应用—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: 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 = ''; 44 } 45 46 // 初始化 47 function fntab(){ 48 oimg.src = arrurl[num]; 49 ospan.innerhtml = 1num' / '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
总结
以上是凯发ag旗舰厅登录网址下载为你收集整理的函数传参和实际应用—js学习笔记2015-6-5（第49天）的全部内容，希望文章能够帮你解决所遇到的问题。
如果觉得凯发ag旗舰厅登录网址下载网站内容还不错，欢迎将凯发ag旗舰厅登录网址下载推荐给好友。
- 上一篇：
- 下一篇：