js中传参的实例多组图片的指定切换与商品价格的计算

最新推荐文章于 2023-08-23 11:34:47 发布

Strive_18

最新推荐文章于 2023-08-23 11:34:47 发布

阅读量950

点赞数 1

分类专栏： Javascript知识

本文链接：https://blog.csdn.net/TC_16_zl/article/details/73604479

版权

Javascript知识专栏收录该内容

12 篇文章 0 订阅

订阅专栏

js中函数传递参数的实例

一、在js中函数的传递参数可以很好的实现代码的重用

代码的重用需要注意以下几点

1、尽量保持HTML代码结构一致，可以通过父级选取子元素
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');

//传入id值，数组，以及事件
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>

<div id="pic2" class="box">
<img src="" alt="" />
<span>数量正在计算中...</span>
<p>文字正在加载中...</p>
<ul></ul>
</div>
</body>
</html>

三、利用js中函数传参实现商品价格的计算效果

代码如下：

<!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循环传入

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 + '元';

// 转换时转换为数字型，得到值时，应加上字符串型
}
}
}
</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传参的实例，但里面有很多我们在实现效果时需要注意的知识点，用红色标注的一定要多加注意，颜色越深越应该更注意，黄色为举例的名称。