<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<ul id="list">
<li>
<input type="button" value="-" />
<strong>0</strong>
<input type="button" value="+" />
单价：<em>12.5元</em>
小计：<span>0元</span>
</li>
<li>
<input type="button" value="-" />
<strong>0</strong>
<input type="button" value="+" />
单价：<em>10.5元</em>
小计：<span>0元</span>
</li>
<li>
<input type="button" value="-" />
<strong>0</strong>
<input type="button" value="+" />
单价：<em>8.5元</em>
小计：<span>0元</span>
</li>
<li>
<input type="button" value="-" />
<strong>0</strong>
<input type="button" value="+" />
单价：<em>8元</em>
小计：<span>0元</span>
</li>
<li>
<input type="button" value="-" />
<strong>0</strong>
<input type="button" value="+" />
单价：<em>14.5元</em>
小计：<span>0元</span>
</li>
</ul>
<p>
商品合计共：<span id='all'>0</span>件，共花费了：<span id='om'>0</span>元<br />
其中最贵的商品单价是：<span id='omax'>0</span>元
</p>
<script type="text/javascript">
var all=0;
var allm=0;
var maxmomey=[];

var allinput=document.getElementsByTagName('input')
for ( var i=0;i<allinput.length;i++){
allinput[i]['onclick']=function(){
if(this.value=='+'){
all++;
var st= this.parentNode.children[1].innerHTML;
st++;
this.parentNode.children[1].innerHTML=st;
}
else{var st= this.parentNode.children[1].innerHTML;
st>0 && all--;
st--;
this.parentNode.children[1].innerHTML=st<=0?0:st;

}
var ospan=this.parentNode.getElementsByTagName('span')[0];
var oem=this.parentNode.getElementsByTagName('em')[0].innerHTML.replace('元','');
var ost=this.parentNode.children[1].innerHTML;
ospan.innerHTML=oem*ost+"元";
document.getElementById('all').innerHTML=all;
document.getElementById('om').innerHTML=ospan.innerHTML;
allospan=list.getElementsByTagName('span');
var allm=0;
for(var i=0;i<allospan.length;i++){
allm+=Number(allospan[i].innerHTML.replace('元',''));

}
document.getElementById('om').innerHTML=allm;
var allst =document.getElementsByTagName('strong')
var maxmomey=[];
for(i=0;i<allst.length;i++){
if(allst[i].innerHTML!='0'){
maxmomey.push(Number(allst[i].parentNode.getElementsByTagName('em')[0].innerHTML.replace('元','')));
}

document.getElementById('omax').innerHTML=maxmomey.length?maxmomey.sort(function(a,b){return b-a} )[0]:0;
}
}
}
</script>
</body>
</html>

javascript小菜单—demo的更多相关文章

  1. 小程序多级下拉菜单demo

    小程序多级下拉菜单demo - CSDN博客 https://blog.csdn.net/github_39371177/article/details/80251211

  2. 近期热门微信小程序demo源码下载汇总

    近期微信小程序demo源码下载汇总,乃小程序学习分析必备素材!点击标题即可下载: 即速应用首发!原创!电商商场Demo 优质微信小程序推荐 -秀人美女图 图片下载.滑动翻页 微信小程序 - 新词 GE ...

  3. 微信小程序DEMO初体验

    小程序虽然被炒的很热,但是绝大部分人却从未亲自体验过,在2017年的上班第一天,献上一个小程序DEMO,您可以体验! 注意:由于微信限制,只能使用扫一扫来体验下方小程序DEMO. DEMO首页截图如下 ...

  4. 12个非常实用的JavaScript小技巧

    在这篇文章中将给大家分享12个有关于JavaScript的小技巧.这些小技巧可能在你的实际工作中或许能帮助你解决一些问题. 使用!!操作符转换布尔值 有时候我们需要对一个变量查检其是否存在或者检查值是 ...

  5. JavaScript小例子：复选框全选

    JavaScript小例子:复选框全选 这只是一个小例子,很简单,但是这个功能还是很常用的: 实现后效果如图: JavaScript代码: <script type="text/jav ...

  6. JavaScript目录菜单滚动反显组件的实现

    JavaScript目录菜单滚动反显组件,有以下两个特点 每个导航菜单项(nav)对应页面一个内容区域(content) 滚动页面到特定内容区域(content)时,对应的菜单会自动切换,一般会添加一 ...

  7. 微信小程序demo

    微信小程序demo github地址 去年小程序刚发布时特别火,赶潮流做了个demo.感觉小程序开发还是比较简单的,主要是官方文档写得比较好,遗憾的是很多API需要微信认证才能使用. 由于小程序包大小 ...

  8. 微信小程序demo－环球小镇

    微信小程序-环球小镇说明:实现了环球小镇(huanqiuxiaozhen.com)移动端商城客户端部分功能,包括首页,分类,购物车,帐户,品牌列表,商品详情等功能.    项目下载:http://bb ...

  9. 11个不常被提及的JavaScript小技巧

    这次我们主要来分享11个在日常教程中不常被提及的JavaScript小技巧,他们往往在我们的日常工作中经常出现,但是我们又很容易忽略. 1.过滤唯一值 Set类型是在 ES6中新增的,它类似于数组,但 ...

随机推荐

  1. Python函数(八)-装饰器(一)

    装饰器通过函数来定义,用来装饰函数 装饰器的结构为高阶函数和内嵌函数 装饰器不改变被装饰函数的源代码和运行方式 如何实现这个效果呢? # -*- coding:utf-8 -*- __author__ ...

  2. VxVM如何扩展和收缩卷及文件系统

    1. 同时扩展卷和文件系统 先用vxassist命令检查DG可用空间 [root@rhelnode1 ~]# vxassist -g testdg maxsize Maximum volume siz ...

  3. 向linux内核增加一个系统调用-2(利用proc打印信息)

    添加系统调用,打印/proc中的系统信息 前面关于proc和内核态函数的东西可以对比代码来看. 参考 http://blog.csdn.net/kylin_fire_zeng/article/deta ...

  4. windows 获取本机(全部)IPv4、IPv6、MAC地址方法 (C/C++)

    windows下获取IP地址的两种方法: 一种可以获取IPv4和IPv6,但是需要WSAStartup: 一种只能取到IPv4,但是不需要WSAStartup: 如下: 方法一:(可以获取IPv4和I ...

  5. PL/SQL批处理语句（一）BULK COLLECT

    我们知道PL/SQL程序中运行SQL语句是存在开销的,因为SQL语句是要提交给SQL引擎处理,这种在PL/SQL引擎和SQL引擎之间的控制转移叫做上下文却换,每次却换时,都有额外的开销.然而,FORA ...

  6. C# 设置程序session过期时间

    服务器设置: 如果服务器上点击站点没有ASP这一项: 下方 角色服务 添加角色服务 安装完毕重新打开iis 点击站点 就可以看到ASP这个选项了 程序webconfig配置: <system.w ...

  7. ueditor 1.2.6使用方法

    本文以php版本为例: 文件下载:http://ueditor.baidu.com/website/download.html 还可以自己先定义内容,然后下载,这样可以帮助我们精简不少东西. 以本地p ...

  8. rest-framework组件 之 分页

    分页 简单分页 from rest_framework.pagination import PageNumberPagination,LimitOffsetPagination class PNPag ...

  9. 删除GHOST中win7桌面IE删不掉的解决办法

    打开Win+R 运行regedit 依次打开: HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Explorer\Deskto ...

  10. HUST高级软件工程--测试管理工具实践--Day2

    测试管理工具实践--Day2 今天完成任务情况: 小靳 今天主要探索如何安装jira.在官网下载了最新版Windows64位jira,然后按照网上教程走,设置好端口号.在安装之前自以为这款软件在安装的 ...