js第五节-函数参数的传递
js的函数参数的传递-->这个参数指的就是数据类型：数字，字符串，对象，函数，未定义。
一、函数参数传递的概念介绍
举例：
1.传数字
function tNum(a){
alert(a);
}
tNum(4);
2.传字符串
function tString(a){
alert(a);
}
tString('chenminglv');
3.传对象
function tObject(a,b){
a.onload = function(){
b.getElementsByTagName('input');
}
}
tObject(document);
4.传函数
function tFun(a){
a(){};
}
tFun(a(){alert('函数传递');});
5.传递一些未定义。
function tUndef(a){
alert(Number(a));
}
tUndef('');
二、函数参数传递的应用
1.商品加减与统计结果
这个题的要求是能计算出商品共买了多少件，共花费了多少元，以及其中最贵的商品单价。
①商品共买了多少件？
解题思路:
如果是按照每个li里面的个数来作为件数的话，那么总共的件数就会被每个li的件数覆盖。我们可以用点击数来算总共的件数。
首先，设一个sumNum变量和clickNum的变量（都是全局变量），sumNum是计算总共的值。clickNum计算点击每个li的加按钮，每点击一次，就增加一次,sumNum += clickNum。为了不让其clickNum点击数重复的加，我们在其每次点击的时候都将clickNum变量设为0；加的时候是clickNum++;减的时候是clickNum--;减法的时候一定要有判断条件，不能让其n==0,sumNum -= clickNum；
②共花费了多少元?
设其总共花费的值：var sumPrice = 0(全局变量);
总共花费的值：
加按钮的时候
sumPrice = sumPrice + clickNum * price;
减按钮的时候
sumPrice = sumPrice - clickNum * price;
③其中最贵的商品单价?
这是一个排序算法题，对于一个排序算法，一般会设置好多数循环进行比较。但是，对于我们这个最贵商品单价的比较，我们好像拿到手感觉到不知从何做起？
思路解析：
建立数组---既然是比较数，首先要有一堆数进行比较。这个难点在哪？难点在于这个数一会儿存在，一会儿又不存在，不好进行比较。首先，建一个数组var arr = [0,0,0,0,0];因为是5个li，所以事先先建一个数组用来存单价的价格。这个数组也可以动态的建立。var arr = [] ;for(var i = 0; i < aLi.length;i++){arr.push(0);}.我们先建一个静态的数组。
建立自定义属性（索引值）---有了静态的数组，接下来，我们建立其对应的索引值，用来在点击事件里面给指定的索引值添加价格数字。for(var i =0;i < aLi.length;i++){aLi[i].index = i;}
进行价格的添加---对于加按钮，我们可以将指定的li.index = price;这个price 已经成功添加到指定索引值的位置。对于减按钮，先要判断其n值是否为0，如果为0，则判断其该位的价格已经不存在了，就表示不能进行价格的比较，但对于数组的长度，我们不好控制，所以，我们将其索引值的位置赋为0 ，li.index = 0;如果n没有小于等于0，这个时候我们继续进行和加法同样的操作。
进行价格的比较---这个比较就不是太难了，肯定是先全局设一个最大值var maxPrice = 0;然后就是每个数组与最大值进行比较，更换最大值。if(arr[li.index] > maxPrice){maxPrice = arr[li.index];} .在加法当中，如果n为0了，这个时候我们需要重新将maxPrice = 0;并且重新找一个最大值for(var i = 0;i < arr.length;i++){if(arr[i] > maxPrice){maxPrice = arr[i];}
复制---最后不要忘记oSpan1.innerHTML = maxPrice进行赋值哦，否则页面没有效果，你还以为是程序问题了。
图1.商品加减与统计结果
代码分享：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>
window.onload = function () {
var oUl = document.getElementById('list');
var aLi = oUl.getElementsByTagName('li');
var sumNum = 0;
var sumPrice = 0;
var maxPrice = 0;
var arr = [0,0,0,0,0];
for(var i = 0;i < aLi.length;i++){
aLi[i].index = i;
}
// fnCount ( aLi[0] );
for ( var i=0; i<aLi.length; i++ ) {
fnCount ( aLi[i] );
}
function fnCount (li) {
var aBtn = li.getElementsByTagName ('input');
var oStrong = li.getElementsByTagName ('strong')[0];
var oEm = li.getElementsByTagName ('em')[0];
var oSpan = li.getElementsByTagName ('span')[0];
var oP = document.getElementsByTagName('p')[0];
var oStrong1 =oP.getElementsByTagName ('strong')[0];
var oEm1 = oP.getElementsByTagName ('em')[0];
var oSpan1 = oP.getElementsByTagName('span')[0];
var n = oStrong.innerHTML;
var clickNum = 0; // '0'
var price = parseFloat(oEm.innerHTML); // 12.5
aBtn[0].onclick = function () {
clickNum = 0;
if ( n > 0 ) {
n--;
clickNum ++;
}
sumNum = sumNum - clickNum;
oStrong.innerHTML = n;
oSpan.innerHTML = n*price + '元';
oStrong1.innerHTML = sumNum ;
sumPrice -= clickNum *price;
oEm1.innerHTML = sumPrice + '元';
if(n > 0){
arr[li.index] = price;
if(arr[li.index] > maxPrice){
maxPrice = arr[li.index];
}
}else{
arr[li.index] = 0;
maxPrice = 0;
for(var i = 0;i < arr.length;i++){
if(arr[i] > maxPrice){
maxPrice = arr[i];
}
}
}
oSpan1.innerHTML = maxPrice;
};
aBtn[1].onclick = function () {
clickNum = 0;
clickNum ++;
sumNum = sumNum + clickNum;
n++;
oStrong.innerHTML = n;
oSpan.innerHTML = n*price + '元';
oStrong1.innerHTML = sumNum ;
sumPrice += clickNum *price;
oEm1.innerHTML = sumPrice + '元';
/* arr[li.index] = price;
if(arr[li.index] > maxPrice){
maxPrice = arr[li.index];
*/
arr[li.index] = price;
if(arr[li.index] > maxPrice){
maxPrice = arr[li.index];
}
oSpan1.innerHTML = maxPrice;
};
}
};
</script>
</head>
<body>
<ul id="list">
<li>
<input type="button" value="-" />
<strong>0</strong>
<input type="button" value="+" />
单价：<em>12.5元</em>
小计：<span>0元</span>
</li>
<li>
<input type="button" value="-" />
<strong>0</strong>
<input type="button" value="+" />
单价：<em>10.5元</em>
小计：<span>0元</span>
</li>
<li>
<input type="button" value="-" />
<strong>0</strong>
<input type="button" value="+" />
单价：<em>8.5元</em>
小计：<span>0元</span>
</li>
<li>
<input type="button" value="-" />
<strong>0</strong>
<input type="button" value="+" />
单价：<em>8元</em>
小计：<span>0元</span>
</li>
<li>
<input type="button" value="-" />
<strong>0</strong>
<input type="button" value="+" />
单价：<em>14.5元</em>
小计：<span>0元</span>
</li>
</ul>
<p>
商品合计共：<strong>0</strong>件，共花费了：<em>0元</em><br />
其中最贵的商品单价是：<span>0</span>元
</p>
</body>
</html>
2.修改文本框的值；
这个作业容易走一条弯路，比如我做的用for循环来做的，这样里面的变量就会重了，最后显示的效果就会有问题。后来又用了一个繁琐的方法做的，有效果，但是代码不能重用，应该要考虑代码的重用性。最后用了函数来做，将其相同的部分用函数给包裹起来，然后给其传不同的参数，这样她们的里面的变量也会不同，代码的重用性非常好。
图2.修改文本框的值
代码分享：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>修改文本框的值（使用了函数）</title>
<script>
window.onload = function(){
//获取属性
//var oEditor = document.getElementById('editor');
var oUl =document.getElementsByTagName('ul')[0];
//var aLi = oUl.getElementsByTagName('li')[0];
var aLi = oUl.getElementsByTagName('li');
/* var oDiv1 = aLi.getElementsByTagName('div')[0];
var oDiv2 = aLi.getElementsByTagName('div')[1];
var aP = aLi.getElementsByTagName('p')[0];
var aInput = aLi.getElementsByTagName('input')[1];
var aStrong = aLi.getElementsByTagName('strong')[0];
var aSpan = aLi.getElementsByTagName('span')[0];
*/
for(var i = 0;i < aLi.length;i++){
funCn(aLi[i]);
}
function funCn(li){
var oEditor = li.getElementsByTagName('input')[0];
var oDiv1 = li.getElementsByTagName('div')[0];
var oDiv2 = li.getElementsByTagName('div')[1];
var aP = li.getElementsByTagName('p')[0];
var aInput = li.getElementsByTagName('input')[1];
var aStrong = li.getElementsByTagName('strong')[0];
var aSpan = li.getElementsByTagName('span')[0];
oEditor.onclick = function(){
oDiv1.style.display = 'none';
oDiv2.style.display = 'block';
};
aStrong.onclick = function(){
oDiv1.style.display = 'block';
oDiv2.style.display = 'none';
aP.innerHTML = aInput.value;
};
aSpan.onclick = function(){
oDiv1.style.display = 'block';
oDiv2.style.display = 'none';
};
};
};
</script>
<style>
body,ul,h3,input{margin:0;padding:0;font-size:12px;}
li{list-style:none;}
#box{width:600px;margin:30px auto;}
h3{background:green;color:#fff;}
ul{background:#fff;}
li{height:40px;border:1px solid #c0c0c0;}
.box1{display:inline-block;}
li p{display:inline-block;width:140px;padding-left:20px;}
li .editor{display:inline-block;}
li .box2{display:inline-block;display:none;}
li .text1{width:120px;display:inline-block;margin-top:10px;margin-left:10px;}
li .strong1{display:inline-block;color:#00CC33;padding-left:20px;cursor:pointer;}
li .span1{display:inline-block;color:#00CC33;padding-left:20px;font-weight:bold;cursor:pointer;}
</style>
</head>
<body>
<div id="box">
<h3>分类名称</h3>
<ul>
<li>
<div class="box1"><p>梦想创业俱乐部</p> <input type="button" value="编辑" class="editor"/></div>
<div class="box2"><input type="text" class="text1" /> <strong class="strong1">保存</strong> <span class="span1">取消</span></div>
</li>
<li>
<div class="box1"><p>梦想创业俱乐部</p> <input type="button" value="编辑" class="editor"/></div>
<div class="box2"><input type="text" class="text1" /> <strong class="strong1">保存</strong> <span class="span1">取消</span></div>
</li>
</ul>
</div>
</body>
</html>
3.搜狐视频记录片列表展示
这个题一定要注意的是，li元素里面的内容千万不能限制了他的高度，否则会导致挤压变形。
图3.搜狐视频记录片列表展示
代码分享：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>搜狐视频记录片列表展示</title>
<script>
window.onload = function(){
var oUl = document.getElementsByTagName('ul')[0];
var aLi = oUl.getElementsByTagName('li');
var aNews = document.getElementById('news');
var aNewShow = document.getElementById('newShow');
//清楚函数
function clearAll(){
for(var i = 0;i < aLi.length;i++){
aLi[i].getElementsByTagName('p')[0].style.display = 'block';
aLi[i].getElementsByTagName('p')[1].style.display = 'none';
}
};
for(var i = 0;i < aLi.length;i++){
aLi[i].index = i;
aLi[i].οnmοuseοver= function(){
var aP = aLi[this.index].getElementsByTagName('p');
clearAll();
//aNews.style.display = 'block';
//aNewShow.style.display = 'none';
aP[0].style.display = 'none';
aP[1].style.display = 'block';
};
/*aLi[i].οnmοuseοut= function(){
aNews.style.display = 'block';
aNewShow.style.display = 'none';
var aP = aLi[this.index].getElementsByTagName('p');
aP[0].style.display = 'block';
aP[1].style.display = 'none'
};*/
}
};
</script>
<style>
h3,body,ul{margin:0;padding:0;font-size:12px;}
li{list-style:none;}
.clear{zoom:1;}
.clear:after{content:'';display:block;clear:both;}
.wrap{width:256px;border:1px solid #000;margin:30px auto;background:#dee7e7;padding:12px 6px 0 6px;}
.header{height:38px;width:256px;}
.header h3{height:37px;width:134px;color:#295263;padding-left:12px;border-bottom:1px solid #94bdd6;float:left;line-height:50px;font-size:20px;}
.header a{text-decoration:none;float:left;width:34px;height:22px;border:1px solid #94bdd6;color:#185273;line-height:24px;text-align:center;margin-top:14px;}
.a1{color:#000;font-wight:bold;background:#fff;border-bottom:none;}
.content{width:256px;}
li{--height:30px;background:url(img/3.jpg) repeat-x bottom;padding:4px 0 4px 6px;}
.news{}
.num{display:inline-block;width:17px;height:13px;background:#21638c;color:#fff;line-height:17px;text-align:center;font-weight:bold;margin-right:10px;}
.newShow{height:72px;padding-top:8px;font-size:12px;color:#185273;background:#fff;display:none;}
.num1{float:left;width:17px;height:13px;background:#21638c;color:#fff;line-height:17px;text-align:center;font-weight:bold;}
.newShow img{width:81px;height:60px;float:left;margin:0 10px 0 10px;}
.newShow strong{width:108px;height:32px;float:left;margin-top:9px;}
.newShow #play{width:41px;height:22px;float:right;font-weight:none;}
.footer{height:25px;}
.footer a{text-decoration:none;color:#000;line-height:25px;float:right;}
#news{display:none;}
#newShow{display:block;}
</style>
</head>
<body>
<div class="wrap">
<div class="header clear">
<h3>观看排行榜</h3>
<a href='#' class='a1'>每日</a><a href='#' class='a2'>每周</a><a href='#' class='a3'>全部</a>
</div>
<ul class='content'>
<li>
<p class='news'><span class='num'>1</span>解密：关于地球与人类的一千零一问</p>
<p class='newShow clear'><span class='num1'>1</span><img src='img/1.jpg' /><strong>深度解密传奇事件人物，探索未知世界...</strong><img src='img/2.jpg' id="play"/></p>
</li>
<li>
<p class='news'><span class='num'>2</span>解密：关于地球与人类的一千零一问</p>
<p class='newShow clear'><span class='num1'>2</span><img src='img/1.jpg' /><strong>深度解密传奇事件人物，探索未知世界...</strong><img src='img/2.jpg' id="play"/></p>
</li>
<li>
<p class='news'><span class='num'>3</span>解密：关于地球与人类的一千零一问</p>
<p class='newShow clear'><span class='num1'>3</span><img src='img/1.jpg' /><strong>深度解密传奇事件人物，探索未知世界...</strong><img src='img/2.jpg' id="play"/></p>
</li>
<li>
<p class='news'><span class='num'>4</span>解密：关于地球与人类的一千零一问</p>
<p class='newShow clear'><span class='num1'>4</span><img src='img/1.jpg' /><strong>深度解密传奇事件人物，探索未知世界...</strong><img src='img/2.jpg' id="play"/></p>
</li>
<li>
<p class='news'><span class='num'>5</span>解密：关于地球与人类的一千零一问</p>
<p class='newShow clear'><span class='num1'>5</span><img src='img/1.jpg' /><strong>深度解密传奇事件人物，探索未知世界...</strong><img src='img/2.jpg' id="play"/></p>
</li>
<li>
<p class='news'><span class='num'>6</span>解密：关于地球与人类的一千零一问</p>
<p class='newShow clear'><span class='num1'>6</span><img src='img/1.jpg' /><strong>深度解密传奇事件人物，探索未知世界...</strong><img src='img/2.jpg' id="play"/></p>
</li>
<li>
<p class='news'><span class='num'>7</span>解密：关于地球与人类的一千零一问</p>
<p class='newShow clear'><span class='num1'>7</span><img src='img/1.jpg' /><strong>深度解密传奇事件人物，探索未知世界...</strong><img src='img/2.jpg' id="play"/></p>
</li>
<li>
<p class='news' id='news'><span class='num'>8</span>解密：关于地球与人类的一千零一问</p>
<p class='newShow clear' id='newShow'><span class='num1'>8</span><img src='img/1.jpg' /><strong>深度解密传奇事件人物，探索未知世界...</strong><img src='img/2.jpg' id="play"/></p>
</li>
</ul>
<div class='footer'><a href='#'>更多>></a></div>
</div>
</body>
</html>
4.选择卡里套选择卡
这个作业一定要注意的是：先做一个选项卡，然后后面的也就出来了。
图4.选择卡里套选择卡
代码分享：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>选择卡里套选择卡</title>
<script>
window.onload = function(){
var oLeft = document.getElementById('left');
var aLi = oLeft.getElementsByTagName('li');
var aRight = document.getElementById('right');
var aDiv = aRight.getElementsByTagName('div');
var aUl = aRight.getElementsByTagName('ul');
清楚选项卡所有样式
function clearAll(){
for(var i = 0;i < aDiv.length;i++){
aLi[i].style.background = '#e7e7e7';
aDiv[i].style.display = 'none';
aUl[i].style.display = 'none';
}
};
for(var i = 0;i < aLi.length;i++){
aLi[i].index = i;
aLi[i].onmouseover = function(){
clearAll();
aLi[this.index].style.background = '#fff';
aDiv[this.index].style.display = 'block';
aUl[this.index].style.display = 'block';
var aImg = aDiv[this.index].getElementsByTagName('img');
var aLi1 = aUl[this.index].getElementsByTagName('li');
//清楚选项卡里面选项的所有样式
function clearAll1(){
for(var i = 0;i < aImg.length;i++){
aLi1[i].style.background = '#5a5a52';
aImg[i].style.display = 'none';
}
};
for(var i = 0;i < aImg.length;i++){
aLi1[i].index = i;
aLi1[i].onmouseover = function(){
clearAll1();
aLi1[this.index].style.background = '#ef3163';
aImg[this.index].style.display = 'block';
};
}
};
}
/* aLi[i].onclick = function(){
clearAll();
aLi[this.index].style.background = '#fff';
aDiv[this.index].style.display = 'block';
aUl[this.index].style.display = 'block';
var aImg = aDiv[this.index].getElementsByTagName('img');
var aLi1 = aUl[this.index].getElementsByTagName('li');
//清楚选项卡里面选项的所有样式
function clearAll1(){
for(var i = 0;i < aImg.length;i++){
aLi1[i].style.background = '#5a5a52';
aImg[i].style.display = 'none';
}
};
for(var i = 0;i < aImg.length;i++){
aLi1[i].index = i;
aLi1[i].onclick = function(){
clearAll1();
aLi1[this.index].style.background = '#ef3163';
aImg[this.index].style.display = 'block';
};
}
};*/
};
</script>
<style>
body,ul{margin:0;padding:0;}
.clear{zoom:1;}
.clear:after{content:'';display:block;clear:both;}
li{list-style:none;}
.wrap{width:956px;margin:30px auto;border:1px solid #c0c0c0;}
.left{with:148px;float:left;}
.left li{width:148px;height:74px;text-align:center;padding-top:10px;background:#e7e7e7;border-bottom:1px solid #fff;}
.left li.leftT{background:#fff;}
.right{width:808px;float:left;}
.rightTop{width:808px;height:301px;overflow:hidden;}
.imgT{display:none;}
.rightBottom{width:808px;}
.li1{width:268px;height:38px;margin-right:1px;line-height:38px;color:#fff;font-size:12px;text-align:center;background:#5a5a52;float:left;}
.rightBottom1{display:none;}
.rightT{display:none;}
.liT{background:#ef3163;}
</style>
</head>
<body >
<div class='wrap clear'>
<ul class='left' id="left">
<li class='leftT'><img src='img/1.png' /><br>最热团购</li>
<li><img src='img/2.png' /><br>商城特惠</li>
<li><img src='img/3.png' /><br>名品推荐</li>
<li><img src='img/4.png' /><br>缤纷活动</li>
</ul>
<div class='right' id="right">
<div class='rightTop' >
<img src='img/4.jpg' />
<img src='img/5.jpg' class="imgT"/>
<img src='img/6.jpg'class="imgT" />
</div>
<ul class='rightBottom'>
<li class='li1 liT'>很好看的化妆品</li>
<li class='li1'>什么品牌的化妆品啊</li>
<li class='li1'>快来看一看吧...</li>
</ul>
<div class='rightTop rightT'>
<img src='img/7.jpg' />
<img src='img/5.jpg' class="imgT"/>
<img src='img/6.jpg' class="imgT"/>
</div>
<ul class='rightBottom rightT'>
<li class='li1 liT'>很好看的化妆品1</li>
<li class='li1'>什么品牌的化妆品啊1</li>
<li class='li1'>快来看一看吧1...</li>
</ul>
<div class='rightTop rightT'>
<img src='img/4.jpg' />
<img src='img/5.jpg' class="imgT"/>
<img src='img/7.jpg' class="imgT"/>
</div>
<ul class='rightBottom rightT'>
<li class='li1 liT'>很好看的化妆品2</li>
<li class='li1'>什么品牌的化妆品啊2</li>
<li class='li1'>快来看一看吧2...</li>
</ul>
<div class='rightTop rightT'>
<img src='img/7.jpg' />
<img src='img/5.jpg' class="imgT"/>
<img src='img/6.jpg' class="imgT"/>
</div>
<ul class='rightBottom rightT'>
<li class='li1 liT'>很好看的化妆品3</li>
<li class='li1'>什么品牌的化妆品啊3</li>
<li class='li1'>快来看一看吧3...</li>
</ul>
</div>
</div>
</body>
</html>
今天我们函数参数的传递就讲到这里，下一节我们将会聊聊js的作用域，最后还是希望大家把基础打牢，最好能把陈明吕老师上面写的这些案例都做出来。谢谢大家。