<!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. 希尔排序和归并排序（java实现）

    希尔排序 希尔排序算法实际上是一种特殊的插入排序,由DL．Shell于1959年提出而得名. 算法思想:希尔排序使数组中任意间隔为h的元素都是有序的,这些数组称为h有序数组,对于每个h,按插入排序进行 ...

  2. iOS.AutomatePackageBuild.0-Resource-List

    1. xcodebuild xcodebuild: 构建Xcode project和workspace. 2. TN2339: Building from the Command Lline with ...

  3. iOS.GetCurrentTimestamp

    Cocoa 中测量时间的方法 1. The Methods to Get Current Timestamp iOS中获取时间戳的方法: A. CACurrentMediaTime() B. gett ...

  4. 探索未知种族之osg类生物---器官初始化一

    我们把ViewerBase::frame()比作osg这类生物的肺,首先我们先来大概的看一下‘肺’长什么样子,有哪几部分组成.在这之前得对一些固定的零件进行说明,例如_done代表osg的viewer ...

  5. Tinyos学习笔记（二）

    1.TinyOS communication tools java serialApp -comm serial@/dev/ttyUSB0:telosb java net.tinyos.tools.L ...

  6. JSP脚本元素（声明 %! 表达式 %= 脚本 %）

    JSP脚本元素包括声明.表达式.脚本 声明(declaration):用于在JSP页面中声明合法的变量和方法.以“<%!”开始,以“%>”结束. 在JSP页面中,一个声明可以出现在任何地方 ...

  7. Data Dictionary 数据字典

    数据字典是一种通用的程序设计方法.可以认为,不论什么程序,都是为了处理一定的主体,这里的主体可能是人员.商品(超子).网页.接口.数据库表.甚至需求分析等等.当主体有很多的属性,每种属性有很多的取值, ...

  8. R语言2版本3版本安装

    ./configure --prefix=/YZpath/public/software/R/R-3.5.0 --with-readline=no --with-x=no make make inst ...

  9. springMVC学习 六 跳转方式

    SpringMVC的controller中的方法执行完之后,默认的跳转方式是请求转发 如果想要修改跳转方式,可以设置返回值字符串内容(1) 添加 redirect:资源路径 重定向 "red ...

  10. xml约束的概念

    1 xml 约束的概念 XML 指可扩展标记语言(EXtensible Markup Language) XML 是一种标记语言,很类似 HTML XML 的设计宗旨是传输数据,而非显示数据 XML ...