javascript:第五章 练习 商品加减和统计结果(我)

<!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‘);

var strongs = oUl.getElementsByTagName(‘strong‘);

var ems = oUl.getElementsByTagName(‘em‘);

var spans = oUl.getElementsByTagName(‘span‘);

//alert(spans.length)

var P = document.getElementsByTagName(‘p‘)[0];

for (var i = 0; i < aLi.length; i++) {

//aLi[i].getElementsByTagName(‘strong‘)[0].index = i;//

//aLi[i].getElementsByTagName(‘em‘)[0].index = i;

//aLi[i].getElementsByTagName(‘span‘)[0].index = i;

fnCount(aLi[i]);

}

var M = [];

var pri = [];

var num1 = 0, num2 = 0, num3 = 0;

function fn(){

var num1 = 0, num2 = 0, num3 = 0;

for (var j = 0; j < aLi.length; j++) {

num1+=parseFloat(strongs[j].innerHTML);

num2+=parseFloat(spans[j].innerHTML);

var d=parseInt(strongs[j].innerHTML);

//alert(d);

if(d>0){ M.push(parseFloat(ems[j].innerHTML));}

}; //alert(M);

M.sort(function(a,b){return a-b;});

//alert(M[M.length-1]);

P.innerHTML=‘商品合计共:‘ + num1 + ‘件,共花费了:‘ + num2 + ‘元‘ + ‘<br/>‘

+ ‘其中最贵的商品单价是:‘ + M[M.length-1] + ‘元‘;

};

function fnCount(li){

var aBtn = li.getElementsByTagName(‘input‘);

var oStrong = li.getElementsByTagName(‘strong‘)[0];

var oEm = li.getElementsByTagName(‘em‘)[0];

var oSpan = li.getElementsByTagName(‘span‘)[0];

var n = oStrong.innerHTML; // ‘0‘

var price = parseFloat(oEm.innerHTML); // 12.5

aBtn[0].onclick = function(){

if (n > 0) {

n--;

}

oStrong.innerHTML = n;

oSpan.innerHTML = n * price + ‘元‘;

fn();

};

aBtn[1].onclick = function(){

n++;

oStrong.innerHTML = n;

oSpan.innerHTML = n * price + ‘元‘;

fn();

}

};

};

</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>18.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>

时间: 2025-01-17 11:13:42

javascript:第五章 练习 商品加减和统计结果(我)的相关文章

JavaScript第五章

引用类型 引用类型是一种将数据和功能组织在一起的数据结构. 引用类型:描述的是一类对象所具有的属性和方法: 对象是某个特定引用类型的实例. 1.Object类型 创建Object实例的方法有两种: (1)  new操作符后跟Object构造函数 (2)  使用对象字面量表示法,向函数传递大量可选参数的首选方式:var person = {} 对象字面量表示法: 对象的属性名会自动转换为字符串: 在函数内部,可以使用typeof 操作符来检测每个属性是否存在: 函数传参技巧:对于必须值使用命名参数

购物车商品加减效果

思路: 根据点击运算符进行相关的运算. 1.获取点击的运算符: 2.通过节点关系找到input的值: 3.进行运算: 4.将计算后的值返回给本身 JavaScript方式: <body> <button onclick="calculate(this)">-</button> <input type="text" size="2" value="1" name="num&qu

从思维导图中学习javascript第五章字符串函数

1.charAt():功能返回字符串中第n个字符,若超出范围返回空字符串,返回值 string中第N个字符的实际值 2.charCodeAt()

javascript高级程序设计 学习笔记 第五章 上

第五章 引用类型的值(对象)是引用类型的一个实例.在 ECMAScript 中,引用类型是一种数据结构, 用于将数据和功能组织在一起.它也常被称为类,但这种称呼并不妥当.尽管 ECMAScript 从技术上讲是一门面向对象的语言,但它不具备传统的面向对象语言所支持的类和接口等基本结构.引用类型有时候也被称为对象定义,因为它们描述的是一类对象所具有的属性和方法. 对象是某个特定引用类型的实例.新对象是使用 new 操作符后跟一个构造函数来创建的. 构造函数本身就是一个函数,只不过该函数是出于创建新

JavaScript高级程序设计(第3版)第五章读书笔记

第五章 引用类型 创建Object实例的方式有两种,第一种是使用new操作符后跟Object构造函数,例如: var person = new Object( ); person.name = “Nicholas”; person.age=29; 第二种是使用对象字面量表示法.如: var person = { name : “Nicholas”, age : 29 }; 在最后一个属性后面添加逗号,会在IE7及更早版本和Opera中导致错误. 两种访问对象属性的方法,一是方括号语法,例如per

读《编写可维护的JavaScript》第五章总结

第五章 UI层的松耦合 5.1 什么是松耦合 在Web开发中,用户界面是由三个彼此隔离又相互作用的层定义的: HTML是用来定义页面的数据和语义 CSS用来给页面添加样式 JavaScript用来给页面添加行为 我们的目标:确保对一个组件的修改不会经常性地影响其他部分. 结果: 遇到和文本或结构相关的问题,通过查找HTML即可定位 当发生了样式相关的问题,你知道问题出现在CSS中 对于那些行为相关的问题,你直接去JavaScript中找到问题所在 5.2 将JavaScript从CSS中抽离 I

ECSHOP商品购买数量增加加减按钮插件(包含购物车商品数量增加减少,自动更新)

ecshop商品页购买数量加减按钮ecshop购物车页加减按钮插件 默认模版为例详细教程: 找到flow.php里的如下代码 elseif ($_REQUEST['step'] == 'update_cart') { if (isset($_POST['goods_number']) && is_array($_POST['goods_number'])) { flow_update_cart($_POST['goods_number']); } show_message($_LANG['

[书籍翻译] 《JavaScript并发编程》第五章 使用Web Workers

本文是我翻译<JavaScript Concurrency>书籍的第五章 使用Web Workers,该书主要以Promises.Generator.Web workers等技术来讲解JavaScript并发编程方面的实践. 完整书籍翻译地址:https://github.com/yzsunlei/javascript_concurrency_translation .由于能力有限,肯定存在翻译不清楚甚至翻译错误的地方,欢迎朋友们提issue指出,感谢. Web workers在Web浏览器中

在axure中实现商品数量加减效果,原型库网站讲师-金乌 解答同学问

有同学在群里提问,如何使用axure制作商品数量增加减少效果,见GIF图.虽然属于初级教程,但很多同学还是小白新手阶段,所以特地录制了详细的视频讲解,供大家学习参考! 该教程由原型库网站录制http://www.yuanxingku.com转载请注明出处! 在axure中实现商品数量加减效果,原型库网站讲师-金乌 解答同学问,布布扣,bubuko.com