<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
em{
font-style: normal;
}
ul li{
list-style: none;
}
</style>
</head>
<body>
<ul id="list">
<li>
<input type="button" value="-" />
<strong>0</strong>
<input type="button" value="+" />
单价:<em>10元</em>
总计:<span>0元</span>
</li>

<li>
<input type="button" value="-" />
<strong>0</strong>
<input type="button" value="+" />
单价:<em>5元</em>
总计:<span>0元</span>
</li>

<li>
<input type="button" value="-" />
<strong>0</strong>
<input type="button" value="+" />
单价:<em>6元</em>
总计:<span>0元</span>
</li>

<li>
<input type="button" value="-" />
<strong>0</strong>
<input type="button" value="+" />
单价:<em>8元</em>
总计:<span>0元</span>
</li>

</ul>
<p>商品数量总计:0件</p>
<p>共消费:0元</p>
<p>商品最贵的是:0元</p>
<script>
var oList = document.getElementById("list")
var aLi = oList.getElementsByTagName("li")
var oStrong = oList.getElementsByTagName("strong")
var oP = document.getElementsByTagName("p")
var oSpan = document.getElementsByTagName("span")


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

function tab(a){
var oInput = aLi[a].getElementsByTagName("input")
var oStrong = aLi[a].getElementsByTagName("strong")[0]
var oEm = aLi[a].getElementsByTagName("em")[0]
var oSpan = aLi[a].getElementsByTagName("span")[0]

var num = 0

oInput[1].onclick = function(){
num++
oStrong.innerHTML = num
var oPrice = parseFloat(oEm.innerHTML)
oSpan.innerHTML = parseFloat(num)*oPrice+"元"

var addShop = count()
// console.log(addShop)
oP[0].innerHTML = "商品数量总计:"+addShop+"件"

var all = all_price()

oP[1].innerHTML = "共消费:"+all+"元"

var max = compare()
// console.log(max)
oP[2].innerHTML = "商品最贵的是:"+max+"元"


}
oInput[0].onclick = function(){
num--
if(num<=0){
num = 0
}
oStrong.innerHTML = num
var oPrice = parseFloat(oEm.innerHTML)
oSpan.innerHTML = parseFloat(num)*oPrice+"元"

var addShop = count()
// console.log(addShop)
oP[0].innerHTML = "商品数量总计:"+addShop+"件"

var all = all_price()

oP[1].innerHTML = "共消费:"+all+"元"

}
}

//商品数量求和
function count(){
var sum = 0

for (var i=0;i<oStrong.length;i++) {
sum+=parseFloat(oStrong[i].innerHTML)
}
// console.log(sum)
return sum
}
//消费总计

function all_price(){
var sum = 0

for (var i=0;i<oSpan.length;i++) {
sum+=parseFloat(oSpan[i].innerHTML)
}
// console.log(sum)
return sum


}

//比较最大值
function compare(){
var arr = []

for (var i=0;i<oSpan.length;i++) {
arr.push(parseFloat(oSpan[i].innerHTML))
}

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

return arr[0]

}



</script>
</body>
</html>

js五道经典练习题--第三道实现购物车功能的更多相关文章

  1. js五道经典练习题--第五道成绩列表

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  2. js五道经典练习题--第四道qq好友列表

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  3. js五道经典练习题--第二道仿qq聊天框

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  4. js五道经典练习题--第一道

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  5. JS实现添加至购物车功能

    效果图展示: 当将书拖拽至购物车一览时: 首先将页面的基本结构写出来: <!DOCTYPE html> <html lang="en"> <head& ...

  6. Python经典练习题1：一个整数，它加上100后是一个完全平方数，再加上168又是一个完全平方数，请问该数是多少？

    Python经典练习题 网上能够搜得到的答案为: for i in range(1,85): if 168 % i == 0: j = 168 / i; if i > j and (i + j) ...

  7. 【视频+图文】Java基础经典练习题（一）输出2-100之间的素数，及素数个数

    目录 第一题:判断2-100之间有多少个素数,并输出所有素数. 1.视频讲解: 2.思路分析: 代码讲解:以i=4为例 4.为大家准备了彩蛋: 能解决题目的代码并不是一次就可以写好的 我们需要根据我们 ...

  8. MYSQL经典练习题，熟悉DQL

    MYSQL经典练习题 (本练习题可让你熟悉DQL,快速的上手DQL) 首先,先在数据库中建立基本数据库以及表项: DROP DATABASE IF EXISTS `test`; CREATE DATA ...

  9. 【JSP】Cookie的使用及保存中文，并用Cookie实现购物车功能

    Cookie是服务器存放在客户端的一些数据,比如密码,以及你曾经访问过的一些数据. 设置Cookie //设置cookie Cookie cookie = new Cookie("TOM&q ...

随机推荐

  1. numpy常见属性、创建数组

      1.几种常见numpy的属性 ndim:维度 shape:行数和列数 size:元素个数 >>> import numpy as np #导入numpy模块,np是为了使用方便的 ...

  2. SNP（单核苷酸多态性）准确性的验证，你造吗？

    SNP(单核苷酸多态性)准确性的验证,你造吗? [2016-12-12]       SNP(全称Single Nucleotide Polymorphisms)即单核苷酸多态性,主要是指在基因组水平 ...

  3. 第一个ASP.NET Web API (C#)程序

    本文翻自http://www.asp.net/web-api/overview/getting-started-with-aspnet-web-api 绝对手工制作,如有雷同,实属巧合. 转载请注明. ...

  4. id不连续

    解决办法 Alter TABLE jf_day_pv_classify Drop id; Alter TABLE jf_day_pv_classify ADD id INT NOT NULL PRIM ...

  5. JSP指令（page include taglib）

    JSP指令指示JSP转换器如何翻译JSP页面到Servlet:JSP指令用来设置整个JSP页面相关的属性,如网页编码方式.脚本语言等 JSP指令的格式: <%@ directive attrib ...

  6. PhpStorm 为 Laravel 搭建 PhpUnit 单元测试环境

    1.PhpStorm 中打开项目的路径为 Laravel 安装的根目录 2.点击右下角 EventLog 提示按钮, 初始化 Composer 的设置 3.打开单元单测试示例类,按提示点击 Fix . ...

  7. 通过SD卡来安装Linux系统

    一.制作SD启动卡(安装Linux)步骤: 烧写原理:superboot-6410.bin(bootloader)+内核镜像文件+根文件系统 1.将SD卡插入USB接口的读卡器,并插在PC的USB口 ...

  8. vb中去掉string数组的一部分

    今天碰到一个问题,登陆的时候,如果不需要验证手机号为空,则不去验证手机号 因为登陆的时候所有的验证信息都存放在一个数组里 Dim CheckUserInfo() As String ={UserBir ...

  9. 内存溢出和内存泄漏的区别(ZZ)

      内存溢出 out of memory,是指程序在申请内存时,没有足够的内存空间供其使用,出现out of memory:比如申请了一个integer,但给它存了long才能存下的数,那就是内存溢出 ...

  10. regular exception

    RegexBuddy :正则表达式编辑器. 正则表达式:通过特定的规则,选取特定的字符串. ^ 为匹配输入字符串的开始位置.$ 为匹配输入字符串的结束位置. \d匹配[0-9] \w匹配[A-Z a- ...