码迷,mamicode.com
首页 > Web开发 > 详细

数据类型回顾——函数传参和实际应用—JS学习笔记2015-6-5(第49天)

时间:2015-06-06 00:20:11      阅读:149      评论:0      收藏:0      [点我收藏+]

标签:

函数传递参数

参数=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){
        // 这里的条件判断是为了去掉NaN
        alert(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

 

数据类型回顾——函数传参和实际应用—JS学习笔记2015-6-5(第49天)

标签:

原文地址:http://www.cnblogs.com/zhangxg/p/4555793.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!