js五道经典练习题--第三道实现购物车功能
<!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五道经典练习题--第三道实现购物车功能的更多相关文章
- js五道经典练习题--第五道成绩列表
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...
- js五道经典练习题--第四道qq好友列表
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...
- js五道经典练习题--第二道仿qq聊天框
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...
- js五道经典练习题--第一道
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...
- JS实现添加至购物车功能
效果图展示: 当将书拖拽至购物车一览时: 首先将页面的基本结构写出来: <!DOCTYPE html> <html lang="en"> <head& ...
- Python经典练习题1：一个整数，它加上100后是一个完全平方数，再加上168又是一个完全平方数，请问该数是多少？
Python经典练习题 网上能够搜得到的答案为: for i in range(1,85): if 168 % i == 0: j = 168 / i; if i > j and (i + j) ...
- 【视频+图文】Java基础经典练习题（一）输出2-100之间的素数，及素数个数
目录 第一题:判断2-100之间有多少个素数,并输出所有素数. 1.视频讲解: 2.思路分析: 代码讲解:以i=4为例 4.为大家准备了彩蛋: 能解决题目的代码并不是一次就可以写好的 我们需要根据我们 ...
- MYSQL经典练习题，熟悉DQL
MYSQL经典练习题 (本练习题可让你熟悉DQL,快速的上手DQL) 首先,先在数据库中建立基本数据库以及表项: DROP DATABASE IF EXISTS `test`; CREATE DATA ...
- 【JSP】Cookie的使用及保存中文，并用Cookie实现购物车功能
Cookie是服务器存放在客户端的一些数据,比如密码,以及你曾经访问过的一些数据. 设置Cookie //设置cookie Cookie cookie = new Cookie("TOM&q ...
随机推荐
- Android——Activity跳转
Activity_main.xml <?xml version="1.0" encoding="utf-8"?> <RelativeLayou ...
- hdu 1686 & poj 2406 & poj 2752 (KMP入门三弹连发)
首先第一题 戳我穿越;http://acm.hdu.edu.cn/showproblem.php?pid=1686 题目大意好理解,每组输入一个子串和一个母串,问在母串中有多少个子串? 文明人不要暴力 ...
- Docker虚拟化实战学习——基础篇（转）
Docker虚拟化实战学习——基础篇 2018年05月26日 02:17:24 北纬34度停留 阅读数:773更多 个人分类: Docker Docker虚拟化实战和企业案例演练 深入剖析虚拟化技 ...
- keepalived+nginx+tomcat+redis集群环境部署
1.所需软件.jar包.配置文件下载:http://pan.baidu.com/s/1dFgntst 2.环境说明: centos6.5 64位 主节点:192.168.40.121 副节点:192 ...
- oracle的常用99条语句
1. select * from emp; 2. select empno, ename, job from emp; 3. select empno 编号, ename 姓名, job 工作 fro ...
- 【Apache】Apache服务的基本概念（二）
Apache服务的基本概念 Apache安装请参照:[Apache]Apache服务的安装(一) 1.端口 apache默认监听TCP协议端口80端口 2.apache服务 apache服务默认会启动 ...
- ssh安装
http://blog.chinaunix.net/uid-20791108-id-3761681.htmlhttp://www.cnblogs.com/mliudong/p/4094519.html ...
- Django+Uwsgi+Nginx项目部署文档
一.基本环境搭建 1)查看服务器 [root@Myjumpserver ~]# cat /etc/sysconfig/selinux SELINUX=disabled SELINUXTYPE=targ ...
- 2019.02.06 bzoj2187: fraction（类欧几里得）
传送门 题意简述:多组询问,每次给出a,b,c,da,b,c,da,b,c,d,求满足ab<pq<cd\frac ab<\frac pq<\frac cdba<qp& ...
- 2018.11.09 bzoj2165: 大楼（倍增+floyd）
传送门 先倍增出iii使得2i2^i2i时间时刚好有每个点能够到mmm层及以上. 然后就可以用floyd+floyd+floyd+倍增求出刚好不超过mmm层的时间,最后再补一层就行了. 代码: #pr ...