<!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. PAT 1006 换个格式输出整数 (15)（C++&JAVA&Python）

    1006 换个格式输出整数 (15)(15 分) 让我们用字母B来表示"百".字母S表示"十",用"12...n"来表示个位数字n(& ...

  2. 【资料收集】AutomationGuru

    http://www.testautomationguru.com/category/docker/

  3. [转]Firefox+Burpsuite抓包配置(可抓取https)

    0x00 以前一直用的是火狐的autoproxy代理插件配合burpsuite抓包 但是最近经常碰到开了代理却抓不到包的情况 就换了Chrome的SwitchyOmega插件抓包 但是火狐不能抓包的问 ...

  4. [Hbase]Hbase章１　Hbase框架及基本概念

    Hbase框架介绍 HBase是一个分布式的.面向列的开源数据库. 不同点: l  和一般的关系数据库不同,hbase是一个适合于非结构化数据存储的数据库. l  Hbase是基于列而不是基于行的模式 ...

  5. 【UI测试】－－帮助设施

  6. js中 xpath 使用

    一.使用: 非IE浏览器,使用 document.evaluate var result = document.evaluate("//a[@href]", document, n ...

  7. HACK字体安装

    参考:https://github.com/source-foundry/Hack Linux的 下载最新版本的Hack. 从存档中提取文件(.zip). 将字体文件复制到系统字体文件夹(通常/usr ...

  8. Django框架之验证码生成示例

    一.生成随机颜色的图片 1)前端代码展示 <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

  9. python的数字图像处理学习（1）

    导入原有的测试图片,测试图片路径,和一些方法,显示出测试图像,测试图像路径. from skimage import io,data,data_dir img_rgb=data.chelsea() i ...

  10. 2018.11.24 poj2774Long Long Message（后缀数组）

    传送门 实际上可以用后缀自动机秒掉 当然后缀数组也挺好写. 我们将两个字符串接在一起,为了方便中间用一个特殊字符连接. 然后对新字符串求heightheightheight数组. 求出来之后对所有满足 ...