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

本文主要是介绍js中传参的实例多组图片的指定切换与商品价格的计算，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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

这篇关于js中传参的实例多组图片的指定切换与商品价格的计算的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！