JavaScript 基础笔记 2函数传参

快来打我* 2022-07-14 08:26 204阅读 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>