js中函數傳遞參數的實例
一、在js中函數的傳遞參數可以很好的實現代碼的重用
代碼的重用需要注意以下幾點
1、儘量保持HTML代碼結構一致，可以通過父級選取子元素
2、把核心主要程序實現，並用函數包起來
3、把每組裏不同的值找出來，並用函數傳參實現
2、把核心主要程序實現，並用函數包起來
3、把每組裏不同的值找出來，並用函數傳參實現
二、利用js中函數傳參實現多組圖片的指定切換效果
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js的圖片指定切換效果</title>
<style>
h1{ height:30px; width:300px; border:2px solid pink; font-size:25px; text- align:center; line-height:30px; margin:40px auto;}
.box{ height:350px; width:500px; border:2px solid yellow; position:relative; margin-right:100px; margin-left:50px; float:left;}
.box img{ height:350px; width:500px;}
ul{ padding:0; margin:0; position:absolute; top:0; right:-80px;}
li{ height:50px; width:50px; background:pink; border:2px solid #CCC; margin- bottom:5px; list-style:none;}
.box .active{ background:yellow;}
.box p,span{ height:30px; width:500px; background:#CCC; font-size:20px; text-align:center; line-height:30px; color:#FFF; position:absolute; left:0; margin:0;}
p{ bottom:0;}
span{ top:0;}
</style>
<script>
window.onload = function(){
fnTab1('pic1',['imgs/z.1.jpg','imgs/z.2.jpg','imgs/z.3.jpg','imgs/z.4.jpg'],['眺望 遠方','在海邊嬉戲','愛心世界','美麗花環'],'onclick');
<html>
<head>
<meta charset="utf-8">
<title>js的圖片指定切換效果</title>
<style>
h1{ height:30px; width:300px; border:2px solid pink; font-size:25px; text- align:center; line-height:30px; margin:40px auto;}
.box{ height:350px; width:500px; border:2px solid yellow; position:relative; margin-right:100px; margin-left:50px; float:left;}
.box img{ height:350px; width:500px;}
ul{ padding:0; margin:0; position:absolute; top:0; right:-80px;}
li{ height:50px; width:50px; background:pink; border:2px solid #CCC; margin- bottom:5px; list-style:none;}
.box .active{ background:yellow;}
.box p,span{ height:30px; width:500px; background:#CCC; font-size:20px; text-align:center; line-height:30px; color:#FFF; position:absolute; left:0; margin:0;}
p{ bottom:0;}
span{ top:0;}
</style>
<script>
window.onload = function(){
fnTab1('pic1',['imgs/z.1.jpg','imgs/z.2.jpg','imgs/z.3.jpg','imgs/z.4.jpg'],['眺望 遠方','在海邊嬉戲','愛心世界','美麗花環'],'onclick');
//傳入id值，數組，以及事件
fnTab1('pic2',['imgs/z.1.jpg','imgs/z.2.jpg','imgs/z.3.jpg','imgs/z.4.jpg'],['眺望 遠方','在海邊嬉戲','愛心世界','美麗花環'],'onmousemove');
fnTab1('pic2',['imgs/z.1.jpg','imgs/z.2.jpg','imgs/z.3.jpg','imgs/z.4.jpg'],['眺望 遠方','在海邊嬉戲','愛心世界','美麗花環'],'onmousemove');
// 可以傳遞不同的值，值不同時，得到的效果也是不同的
function fnTab1( 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 = oDiv.getElementsByTagName('li');
var num = 0;
for( var i=0;i<arrUrl.length;i++){
oUl.innerHTML += '<li></li>';
}
//初始化
function fnTab2(){
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';
}
fnTab2();
for( var i=0;i<aLi.length;i++){
aLi[i].index = i;
aLi[i][evt] = function(){
// 在js中 如果後面的值是固定的可以用"."，如果後面的值是變化的需 要用"[]"，在js中"[]"可以代替任意位置的"."，之前有提過
num = this.index;
fnTab2();
}
}
}
}
</script>
</head>
<body>
<h1>js的圖片指定切換效果</h1>
<div id="pic1" class="box">
<img src="" alt="" />
<span>數量正在計算中...</span>
<p>文字正在加載中...</p>
<ul></ul>
</div>
num = this.index;
fnTab2();
}
}
}
}
</script>
</head>
<body>
<h1>js的圖片指定切換效果</h1>
<div id="pic1" class="box">
<img src="" alt="" />
<span>數量正在計算中...</span>
<p>文字正在加載中...</p>
<ul></ul>
</div>
<div id="pic2" class="box">
<img src="" alt="" />
<span>數量正在計算中...</span>
<p>文字正在加載中...</p>
<ul></ul>
</div>
</body>
</html>
三、利用js中函數傳參實現商品價格的計算效果
function fn1( oLi ){
var aInp = oLi.getElementsByTagName('input');
var oStrong = oLi.getElementsByTagName('strong')[0];
var oB = oLi.getElementsByTagName('b')[0];
var oSpan = oLi.getElementsByTagName('span')[0];
var n1 = Number(oStrong.innerHTML); // '0' 得到的是字符串
var n2 = parseFloat(oB.innerHTML);
aInp[0].onclick = function(){
n1 --;
if( n1<0 ){
n1 = 0;
}
oStrong.innerHTML = n1;
oSpan.innerHTML = n1*n2 + '元';
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js的商品價格計算</title>
<style>
ul{ padding:0; margin:0;}
li{ list-style:none; margin-bottom:20px;}
input{ height:40px; width:40px;}
strong{ font-size:20px;}
span{ font-size:20px; color:red;}
</style>
<script>
window.onload = function(){
var oUl = document.getElementById('list');
var aLi = oUl.getElementsByTagName('li');
for( var i=0;i<aLi.length;i++){
fn1(aLi[i]);
} // 傳遞的是數組，內容相同，用for循環傳入
<html>
<head>
<meta charset="utf-8">
<title>js的商品價格計算</title>
<style>
ul{ padding:0; margin:0;}
li{ list-style:none; margin-bottom:20px;}
input{ height:40px; width:40px;}
strong{ font-size:20px;}
span{ font-size:20px; color:red;}
</style>
<script>
window.onload = function(){
var oUl = document.getElementById('list');
var aLi = oUl.getElementsByTagName('li');
for( var i=0;i<aLi.length;i++){
fn1(aLi[i]);
} // 傳遞的是數組，內容相同，用for循環傳入
function fn1( oLi ){
var aInp = oLi.getElementsByTagName('input');
var oStrong = oLi.getElementsByTagName('strong')[0];
var oB = oLi.getElementsByTagName('b')[0];
var oSpan = oLi.getElementsByTagName('span')[0];
var n1 = Number(oStrong.innerHTML); // '0' 得到的是字符串
var n2 = parseFloat(oB.innerHTML);
// 在js中用innerHTML獲得的HTML內的內容全部是字符串型
aInp[0].onclick = function(){
n1 --;
if( n1<0 ){
n1 = 0;
}
oStrong.innerHTML = n1;
oSpan.innerHTML = n1*n2 + '元';
// 轉換時轉換爲數字型，得到值時，應加上字符串型
}
aInp[1].onclick = function(){
n1 ++;
oStrong.innerHTML = n1;
oSpan.innerHTML = n1*n2 + '元';
}
aInp[1].onclick = function(){
n1 ++;
oStrong.innerHTML = n1;
oSpan.innerHTML = n1*n2 + '元';
// 轉換時轉換爲數字型，得到值時，應加上字符串型
}
}
}
</script>
</head>
<body>
<h1>js的商品價格計算</h1>
<ul id="list">
<li>
<input type="button" value="-" />
<strong>0</strong>
<input type="button" value="+" />
單價：<b>12.5元</b>
小計：<span>0元</span>
</li>
<li>
<input type="button" value="-" />
<strong>0</strong>
<input type="button" value="+" />
單價：<b>10.5元</b>
小計：<span>0元</span>
</li>
<li>
<input type="button" value="-" />
<strong>0</strong>
<input type="button" value="+" />
單價：<b>8.5元</b>
小計：<span>0元</span>
</li>
<li>
<input type="button" value="-" />
<strong>0</strong>
<input type="button" value="+" />
單價：<b>8元</b>
小計：<span>0元</span>
</li>
</ul>
</body>
</html>
}
}
}
</script>
</head>
<body>
<h1>js的商品價格計算</h1>
<ul id="list">
<li>
<input type="button" value="-" />
<strong>0</strong>
<input type="button" value="+" />
單價：<b>12.5元</b>
小計：<span>0元</span>
</li>
<li>
<input type="button" value="-" />
<strong>0</strong>
<input type="button" value="+" />
單價：<b>10.5元</b>
小計：<span>0元</span>
</li>
<li>
<input type="button" value="-" />
<strong>0</strong>
<input type="button" value="+" />
單價：<b>8.5元</b>
小計：<span>0元</span>
</li>
<li>
<input type="button" value="-" />
<strong>0</strong>
<input type="button" value="+" />
單價：<b>8元</b>
小計：<span>0元</span>
</li>
</ul>
</body>
</html>
注意：在此篇文章中，雖然是js傳參的實例，但裏面有很多我們在實現效果時需要注意 的知識點，用紅色標註的一定要多加註意，顏色越深越應該更注意，黃色爲舉例 的名稱。