<!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. Kubernets 第一讲 初探

    1.kubernets的工作流程 (1)开始部署新的应用程序,使用kubectl客户端工具和一个准备好的包含应用程序的Deployment的yaml文件:用户通过kubectl命令将文件的内容发送给A ...

  2. 关于nodejs 假设httpserver,会发现一次网页打开,服务端会响应两次的问题;

    转自:http://cnodejs.org/topic/518772806d38277306804020 每个页面默认都会再发一个de style="line-height: 21px; p ...

  3. ES6 中 let and const

    let 和 const 命令 let 命令 基本用法 ES6 新增了let命令,用来声明变量.它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效. { let a = 10; v ...

  4. memcache的add和set区别

    add可以做memcache锁 使用场景:用户兑换商品,在网络不好的情况下,点击多次,set会将多次提交全纪录下来,add只会记录一次

  5. [Python] 代码中有中文注释会报错

    原因 如果文件里有非ASCII字符,需要在第一行或第二行指定编码声明. 解决方法 在第一行或是第二行加入这么一句# -- coding: utf-8 -- ASCII知识普及: ASCII(Ameri ...

  6. jvm相关知识点

    1.hotspot虚拟机结构:类加载器.堆.栈.方法区.垃圾回收系统.执行引擎.本地方法栈.pc寄存器. 类加载器:负责将class文件从文件系统加载到方法区. 堆:存放对象的一块区域,所有线程共用. ...

  7. 安装linux子系统, 如何用win10 里面的linux子系统来进行通信

    cd /mnt/d/linux_share即可 就把linux_share这个目录挂载到linux里面了.这样windows和linux可以同时修改和访问这个文件夹里面的内容. 安装:cmd中输入ba ...

  8. 2017/2/7utf-8与GBK的区别与修改

    1.GBK:是中文字符编码 2.UTF-8:是国际编码 3.使用GBK与UTF-8编码更耗内存,同时有英文字符多的 尽量用UTF-8编码 4.在项目中,几个修改字符串的方法:

  9. Select isnull(,)

    类似于 select isnull(...,1) from table 这样的 isnull函数防止查询结果为空,防止接下来需要这个值时可能造成空指针异常

  10. [SQL]查询最新的数据

    在设计数据库的时候,把数据的跟新,删除都是软操作,就是都是变成了增加,也是会需要读取最新的那条数据 ' 获取最新时间的数据 Select a.* FROM SortInfo a,(SELECT SnS ...