JavaScript 基础笔记 2函数传参

最新推荐文章于 2024-05-30 16:03:48 发布

hulongfei1991

最新推荐文章于 2024-05-30 16:03:48 发布

阅读量234

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/hulongfei1991/article/details/53447955

版权

JavaScript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

	函数传参：函数传递参数 参数=>js的数据类型:数字，字符串，布尔值，函数，对象，undefined

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

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
ul { padding:0; margin:0; }
li { list-style:none; }
body { background:#333; }
.box { width:400px; height:500px; position:relative; background:url(img/loader_ico.gif) no-repeat center #fff; float:left; margin-right:60px; }
.box img { width:400px; height:500px; }
.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:400px; height:30px; line-height:30px; text-align:center; color:#fff; background:#000; }
</style>
<script>
window.onload = function (){
	fnTab( 'pic1', [ 'img/1.png', 'img/2.png', 'img/3.png', 'img/4.png' ], [ '小宠物', '图片二', '图片三', '面具' ], 'onclick' );
	fnTab( 'pic2', [ 'img/2.png', 'img/3.png', 'img/4.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>

商品价格计算

<!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');
	
	for( var i=0; i<aLi.length; i++ ){
		fn1(aLi[i]);
	}
	
	function fn1(oLi){
		var aBtn = oLi.getElementsByTagName('input');
		var oStrong = oLi.getElementsByTagName('strong')[0];
		var oEm = oLi.getElementsByTagName('em')[0];
		var oSpan = oLi.getElementsByTagName('span')[0];
		var n1 = Number(oStrong.innerHTML);			// '0'		=>   0
		var n2 = parseFloat(oEm.innerHTML);				// '12.5元' => 12.5
		
		aBtn[0].onclick = function (){
			n1 --;
			if ( n1 < 0 ) {
				n1 = 0;
			}
			oStrong.innerHTML = n1;
			oSpan.innerHTML = n1*n2 + '元';
		};
		aBtn[1].onclick = function (){
			n1 ++;
			oStrong.innerHTML = n1;
			oSpan.innerHTML = n1*n2 + '元';
		};
	}
};
</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>
商品合计共：0件，共花费了：0元<br />
其中最贵的商品单价是：0元
</p>

</body>
</html>