函数传参之商品价格计算—JS学习笔记2015-6-6（第50天）

经常我们可以看到很多网站会有多个相同功能的模块，比如淘宝首页的轮播，比如新浪首页的tab切换；

那么可以看出这些地方在HTML结构上是类似的，所以我们可以考虑用一块功能代码去实现，而不同是仅仅是传递参数的不同；

例如：

  1 <!DOCTYPE HTML>
  2 <html>
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5 <title>J函数传参——商品价格计算</title>
  6 </head>
  7
  8 <body>
  9 <ul id="list">
 10     <li>
 11       <input type="button" value="-" />
 12     <strong>0</strong>
 13       <input type="button" value="+" />
 14     单价：<em>12.5元</em>
 15     小计：<span>0元</span>
 16   </li>
 17     <li>
 18       <input type="button" value="-" />
 19     <strong>0</strong>
 20       <input type="button" value="+" />
 21     单价：<em>10.5元</em>
 22     小计：<span>0元</span>
 23   </li>
 24     <li>
 25       <input type="button" value="-" />
 26     <strong>0</strong>
 27       <input type="button" value="+" />
 28     单价：<em>8.5元</em>
 29     小计：<span>0元</span>
 30   </li>
 31     <li>
 32       <input type="button" value="-" />
 33     <strong>0</strong>
 34       <input type="button" value="+" />
 35     单价：<em>8元</em>
 36     小计：<span>0元</span>
 37   </li>
 38     <li>
 39       <input type="button" value="-" />
 40     <strong>0</strong>
 41       <input type="button" value="+" />
 42     单价：<em>14.5元</em>
 43     小计：<span>0元</span>
 44   </li>
 45 </ul>
 46
 47 <p>
 48 商品合计共：<div id='cou'>0件</div>，共花费了：0元<br />
 49 其中最贵的商品单价是：0元
 50 </p>
 51
 52
 53 <script>
 54     var oUl = document.getElementById('list');
 55     var aLi = oUl.getElementsByTagName('li');
 56
 57
 58     // fn1(aLi[0]);
 59     // fn1(aLi[1]);
 60     // fn1(aLi[2]);
 61     // fn1(aLi[3]);  看到这种情形，应该想到使用for循环来实现
 62     for(var i=0; i<aLi.length; i++){
 63         fn1(aLi[i]);
 64     }
 65
 66     function fn1(oLi){ //这里面使用，或者用其他参数a,b,c都可以，这个参数是自己命名的
 67
 68         var aBtn = oLi.getElementsByTagName('input'); // 因为这里面有2个input，所以使用了aBtn,且后面没有加上相应的下标值；
 69         var oStrong = oLi.getElementsByTagName('strong')[0];
 70         var oSpan = oLi.getElementsByTagName('span')[0];
 71         var oEm = oLi.getElementsByTagName('em')[0]; // 这里面加上[0]；是基于该父级元素下，只有这一个em标签
 72         var n1 = Number(oStrong.innerHTML); // "这里需要注意的是从HTML中获取的值都是字符串类型，为了后面的运算，以及避免产生不必要的问题，这里进行显示类型转换"
 73         var n2 = parseFloat(oEm.innerHTML);
 74
 75         aBtn[0].onclick = function(){
 76             n1--;
 77             if(n1<=0){
 78                 n1=0;
 79             }
 80             oStrong.innerHTML = n1;
 81             oSpan.innerHTML = n1*n2+"元";
 82         };
 83         aBtn[1].onclick = function(){
 84             n1++;
 85             oStrong.innerHTML = n1;
 86             oSpan.innerHTML = n1*n2+"元";
 87         };
 88     }
 89
 90 // 下面是比较规范的命名：
 91 //     var oUl = document.getElementById('list');
 92 //     var aLi = oUl.getElementsByTagName('li');
 93
 94 //     // fnCount ( aLi[0] );
 95 //     for ( var i=0; i<aLi.length; i++ ) { 96 //         fnCount ( aLi[i] );
 97 //     }
 98
 99 //     function fnCount ( li ) {  // 注意看这里的函数名命名
100 //         var aBtn = li.getElementsByTagName ('input');
101 //         var oStrong = li.getElementsByTagName ('strong')[0];
102 //         var oEm = li.getElementsByTagName ('em')[0];
103 //         var oSpan = li.getElementsByTagName ('span')[0];
104 //         var n = oStrong.innerHTML;            // 产品的数量
105 //         var price = parseFloat(oEm.innerHTML);            // 产品的单价命名
106
107 //         aBtn[0].onclick = function () {108 //             if ( n > 0 ) {109 //                 n--;
110 //             }
111 //             oStrong.innerHTML = n;
112 //             oSpan.innerHTML = n*price + '元';
113 //         };
114 //         aBtn[1].onclick = function () {115 //             n++;
116 //             oStrong.innerHTML = n;
117 //             oSpan.innerHTML = n*price + '元';
118 //         };
119 //     }
120 // };
121
122 </script>
123
124 </body>
125 </html>

View Code

今天这段自己敲的代码有2个收获：

第一：弄清除，参数的命名是自定的，也就是说这里面的oLi,也可以是其他自己起的名字，比如a，b，c都可以；

第二：动态获取元素的ByTagName方法，其实后面是否使用到下标，就看该HTML机构中，是否有多个相同的元素，比如这里面的按钮，就有2个，所以aBtn，a代表数组，不止一个，后面没有使用下标；

var aBtn = a.getElementsByTagName('input');

而其他该结构中只有一个的HTML元素，这里我们要调用它则直接使用下标了，比如这里的

var oStrong = a.getElementsByTagName('strong')[0];
var oSpan = a.getElementsByTagName('span')[0];
var oEm = a.getElementsByTagName('em')[0];

都是这种情况

转载于:https://www.cnblogs.com/zhangxg/p/4557526.html

函数传参之商品价格计算—JS学习笔记2015-6-6（第50天）相关推荐

函数传参和实际应用—JS学习笔记2015-6-5（第49天）
函数传递参数参数=JS的数据类型=>数字.字符串.布尔.函数.对象.未定义传递有名字的函数,直接传递函数名就可以了. fn1(100, 'px'); function fn1(a, b){/ ...
JS学习笔记——入门基础知识总结
JS入门基础知识总结1 前言基础背景知识一.产生历史: 二.特点: 三.应用方向: 四.Javascript组成: JavaScript书写使用方式一.行内式(了解即可,项目中不使用,日常练习尽 ...
JS一起学05：Date对象、封闭空间、函数传参和封装、获取非行间样式、字符串操作
一.Date对象 1. 获取 oDate.getFullYear() 获取年份 oDate.getMonth()+1 获取月份 0-11----->1-12 oDate.getDate() 获 ...
JS一起学02：函数传参、操作属性第二种方式、提取行间事件、循环、this、焦点问题、联动选择、选项卡焦点图
一.函数传参 1.函数传参:参数就是占位符----函数里定不下来的东西 var a1=function(){ alert(123); }; function a(f){ // 相当于 f=a1 ...
JS函数传参时:值传递与引用传递的区别
JS函数传参时:值传递与引用传递的区别一.先分析基础数据与复杂数据的区别 : 基本数据类型:Undefined.Null.Boolean.Number.String 引用数据类型:对象如:var ...
论JS函数传参时:值传递与引用传递的区别
JS函数传参时:值传递与引用传递的区别? 值传递:值传递的数据为基本数据类型,基本数据类型在内存中存放的是数值本身:值传递为单向传递,只能由实参传递给形参. 引用传递:引用传递的数据为复杂数据类型,复 ...
『Python × C++』函数传参机制学习以及对比
一.Python函数传参在python中,函数传参实际上传入的是变量的别名,由于python内在的变量机制(名称和变量值相互独立),只要传入的变量不可变(tuple中的元素也要是不可变的才行),那么 ...
python学习-高阶函数（函数传参、返回函数（闭包）、匿名函数lambda）
文章目录高阶函数函数传参返回函数(闭包) 匿名函数lambda 高阶函数定义: 至少满足下列一个条件: 接受一个或多个函数作为输入输出一个函数 python里的高阶函数有 filter.ma ...
python函数参数传递机制_Python 学习笔记（一）理解Python的函数传参机制
对于刚接触Python不久的新手,Python的函数传参机制往往会让人迷惑.学过C的同学都知道函数参数可以传值或者传地址.比如下面这段代码点击(此处)折叠或打开 void func(int inpu ...

函数传参之商品价格计算—JS学习笔记2015-6-6（第50天）

函数传参之商品价格计算—JS学习笔记2015-6-6（第50天）相关推荐

最新文章

热门文章