<!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. vue-cli脚手架build目录中的dev-server.js配置文件

    本文系统讲解vue-cli脚手架build目录中的dev-server.js配置文件 这个配置文件是命令npm run dev 和 npm run start 的入口配置文件,主要用于开发环境 由于这 ...

  2. list（）的相关问题

    由php手册中可以看到对list的定义: list — 把数组中的值赋给一些变量,像 array() 一样,这不是真正的函数,而是语言结构.list() 用一步操作给一组变量进行赋值. array l ...

  3. Solaris与Windows Active Directory集成

    通过Solaris与Active Directory的集成,Solaris可以使用Windows 2003 R2/ 2008 Active Directory来进行用户登录验证.以下是简要配置过程. ...

  4. springBoot数据库jpa+对接mybatis

    1  spring Data jpa hibernate引领数据访问技术,使用orm对象关系映射来进行数据库访问,通过模型和数据库进行映射,通过操作对象实现对数据库操作,把数据库相关操作从代码中独立出 ...

  5. [cf557d]Vitaly and Cycle(黑白染色求奇环)

    题目大意:给出一个 n 点 m 边的图,问最少加多少边使其能够存在奇环,加最少边的情况数有多少种. 解题关键:黑白染色求奇环,利用数量分析求解. 奇环:含有奇数个点的环. 二分图不存在奇环.反之亦成立 ...

  6. ubuntu16.04安装labelme

    1.安装Anaconda 下载 官方下载地址:https://www.continuum.io/downloads 所有安装包地址:https://repo.continuum.io/archive/ ...

  7. iOS 隐藏App图标

    1.在进入Info.plist文件 2.在Info.plist文件中新添加一项,把Key值设置为SBAppTags,在Type选项中选取Array 3.在Array中新添加一项Item0,Type类型 ...

  8. The Apache Tomcat installation at this directory is version 8.5.24 Tomcat 8.0 installation is expect

    在一台新电脑上搭建Java开发环境,JDK 是1.8,Tomcat下载了Tomcat 8.5.24,已经配置好了Java和Tomcat的环境变量,开发工具是Eclipse MARS,准备在Eclips ...

  9. 算法Sedgewick第四版-第1章基础-004一封装交易对象

    1. package ADT; /****************************************************************************** * Co ...

  10. js实现无刷新上传

    在新增数据项的时候,用ajax实现无刷新提交,但上传文件的时候,由于数据类型原因,不能将页面的<asp:FileUpload>中以字符串值的方式传到js里调用.我一共找到了两个方法予以解决 ...