<!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. mybatis学习7 实战项目

    自己写一个实战项目,最好和hibernate做对比.

  2. 单片机RS485通信接口、控制线、原理图及程序实例

    RS232 标准是诞生于 RS485 之前的,但是 RS232 有几处不足的地方: 接口的信号电平值较高,达到十几 V,使用不当容易损坏接口芯片,电平标准也与TTL 电平不兼容. 传输速率有局限,不可 ...

  3. C++11 auto和decltype推导规则

    VS2015下测试: decltype: class Foo {}; int &func_int_r(void) { int i = 0; return i; }; int && ...

  4. phonegap中使用自带浏览器打开链接

    <center><a id="ssl2" href="#" onclick="window.open('http://127.0.0 ...

  5. jenkins基础知识

    修改默认端口号启动: java -jar jenkins.war --ajp13Port=-1 --httpPort=8089 一些基本的命令: http://[jenkins-server]/[co ...

  6. C Primer Plus学习笔记（七）- 字符输入/输出和输入验证

    单字符 I/O:getchar() 和 putchar() getchar() 和 putchar() 每次只处理一个字符 getchar() 和 putchar() 都不是真正的函数,它们被定义为供 ...

  7. python 函数对象、函数嵌套、名称空间与作用域、装饰器

    一 函数对象 一 函数是第一类对象,即函数可以当作数据传递 1 可以被引用 2 可以当作参数传递 3 返回值可以是函数 3 可以当作容器类型的元素 二 利用该特性,优雅的取代多分支的if def fo ...

  8. 问题：window7任务计划时；结果：Win7 下如何添加任务计划呢

    Win7 下如何添加任务计划呢 1.点击“开始”--->“所有程序”--->"附件"--->"系统工具"2.选择“任务计划程序” 如下图所示: ...

  9. tomcat中间件配置说明

    因为Tomcat 技术先进.性能稳定,而且免费,因而深受Java 爱好者的喜爱并得到了部分软件开发商的认可,成为目前比较流行的Web 应用服务器.目前最新版本是8.0. 方法/步骤   一.tomca ...

  10. [poj1509]Glass Beads(最小表示法)

    题目大意:求循环同构的字符串的最小字典序. 解题关键:最小表示法模板题. #include<cstdio> #include<cstring> #include<algo ...