欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

第三章 web前端开发工程师--JavaScript进阶程序设计 3-7 javascript 函数传参

程序员文章站 2022-03-09 08:06:06
...

                                           JavaScript 函数传参

 

本节课所讲内容:

  1. JavaScript函数传参介绍

2. JavaScript函数传参的应用

主讲教师:Head老师

一. 函数传参介绍

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>函数传参</title>
</head>
<body>
    <script>
        
        // 函数传递参数
        // 参数 = js 的数据类型
        // 数字 字符串 布尔 函数 对象
    //    function ad(a, b){
    //        alert(a+b);     //连接符
    //    } 
    //    ad(100, 'abs200');
    //    function ad2(a){
    //        alert(a);
    //    }
    //    ad2('Head');
    //    ad2('teacher');    //调用不会被覆盖
        function fn1(a){
            if(typeof a === 'number' && a===a){
                alert(a+20);
            }else if(typeof a === 'string'){
                alert(a);
            }else if(typeof a ==='function'){
                a();
            }
        }
        fn1(100);
        fn1('Head');
        fn1(function (){alert(1);});
    </script>
    
    
</body>
</html>

二. JavaScript函数传参的应用


<!DOCTYPE HTML>
<html>
<head>
<meta charset=utf-8">
<title>函数的应用</title>
<style>
    ul { padding:0; margin:0; }
    li { list-style:none; }
    body { background:pink; }
    .box { width:300px; height:300px; position:relative; background:url(img/loader_ico.gif) no-repeat center #fff; float:left; margin-right:60px; }
    .box img { width:300px; height:300px; }
    .box ul { width:40px; position:absolute; top:0; right:-50px; }
    .box li { width:40px; height:40px; margin-bottom:4px; background:#666; }
    .box .active { background:#FC3; }
    .box span { top:0; }
    .box p { bottom:0; margin:0; }
    .box p,.box span { position:absolute; left:0; width:300px; height:30px; line-height:30px; text-align:center; color:#fff; background:#000; }
</style>
<script>

/*
	重用代码:
		1、尽量保证 HTML 代码结构一致,可以通过父级选取子元素
		2、把核心主程序实现,用函数包起来
		3、把每组里不同的值找出来,通过传参实现
*/

window.onload = function (){
	fnTab( 'pic1', ['img/01.png','img/02.png','img/03.png','img/04.png'],[ '美羊羊', '灰太狼', '小灰灰', '喜洋洋' ], 'onclick' );
	fnTab( 'pic2', ['img/01.png','img/02.png','img/03.png','img/04.png'], [ '美羊羊', '灰太狼', '小灰灰', '喜洋洋' ], 'onmouseover' );
};

function fnTab( id, arrUrl, arrText, evt ){
	var oDiv = document.getElementById(id);
	var oImg = oDiv.getElementsByTagName('img')[0];
	var oSpan = oDiv.getElementsByTagName('span')[0];
	var oP = oDiv.getElementsByTagName('p')[0];
	var oUl = oDiv.getElementsByTagName('ul')[0];
	var aLi = oUl.getElementsByTagName('li');
	var num = 0;
	
	for( var i=0; i<arrUrl.length; i++ ){
		oUl.innerHTML += '<li></li>';
	}
	
	// 初始化
	function fnTab(){
		oImg.src = arrUrl[num];
		oSpan.innerHTML = 1+num+' / '+arrUrl.length;
		oP.innerHTML = arrText[num];
		for( var i=0; i<aLi.length; i++ ){
			aLi[i].className = '';
		}
		aLi[num].className = 'active';
	}
	fnTab();
	
	for( var i=0; i<aLi.length; i++ ){
		aLi[i].index = i;			// 索引值
		aLi[i][evt] = function (){
			num = this.index;
			fnTab();
		};
	}
}
</script>
</head>

<body>

<div id="pic1" class="box">
	<img src="" />
  <span>数量正在加载中……</span>
  <p>文字说明正在加载中……</p>
  <ul></ul>
</div>

<div id="pic2" class="box">
	<img src="" />
  <span>数量正在加载中……</span>
  <p>文字说明正在加载中……</p>
  <ul></ul>
</div>

</body>
</html>

第三章 web前端开发工程师--JavaScript进阶程序设计 3-7 javascript 函数传参

左边:单击切换图片 

右边:鼠标炫富切换图片