<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title></title>
<style>
body {
font-family: "微软雅黑";
}

em {
font-style: normal;
}

ul li {
list-style: none;
margin-bottom: 5px;
}
</style>
</head>

<body>
<ul id="list">
<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.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.5元</em> 小计:
<span>0元</span>
</li>
</ul>

<script>
/*
利用传参方式,完成购物车的加减
1.尽量相同的HTML结构
2.尽量通过父元素寻找元素
* 
* */
var oList = document.getElementById("list")
var aLi = oList.getElementsByTagName("li")
for (var i=0;i<aLi.length;i++) {
tab(aLi[i])
}

function tab(obj){
var oInput = obj.getElementsByTagName("input")
var oStr = obj.getElementsByTagName("strong")[0]
var oSpan = obj.getElementsByTagName("span")[0]
var num = 0
//          console.log(oInput[1])
oInput[1].onclick = function() {
num++
//           console.log(num)
oStr.innerHTML = num
oSpan.innerHTML = 8.5 * num + "元"
}

oInput[0].onclick = function() {
num--
//           console.log(num)
if(num<0){
num=0
}
oStr.innerHTML = num
oSpan.innerHTML = 8.5 * num + "元"
}
}


</script>

</body>

</html>

js加减运算·传参的更多相关文章

  1. js实现文本框支持加减运算的方法

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/T ...

  2. velocity加减运算注意格式 ,加减号的左右都要有空格

    velocity加减运算注意格式 ,加减号的左右都要有空格 #set( $left= $!biz.value - $vMUtils.getReturnMoney($!biz.billBuy) )

  3. [Swift]LeetCode592. 分数加减运算 | Fraction Addition and Subtraction

    Given a string representing an expression of fraction addition and subtraction, you need to return t ...

  4. C语言中指针变量的加减运算

    1.指针变量中存放的是地址值,也就是一个数字地址,例如某指针变量中的值是0x20000000,表示表示此指针变量存放的是内存中位于0x20000000地方的内存地址.指针变量可以加减,但是只能与整型数 ...

  5. 大整数加减运算的C语言实现

    目录 大整数加减运算的C语言实现 一. 问题提出 二. 代码实现 三. 效果验证 大整数加减运算的C语言实现 标签: 大整数加减 C 一. 问题提出 培训老师给出一个题目:用C语言实现一个大整数计算器 ...

  6. Linux中日期的加减运算

    Linux中日期的加减运算 目录 在显示方面 在设定时间方面 时间的加减 正文 date命令本身提供了日期的加减运算. date 可以用来显示或设定系统的日期与时间. 回到顶部 在显示方面 使用者可以 ...

  7. void *指针的加减运算

    1.手工写了一个程序验证void *指针加减运算移动几个字节: //本程序验证空类型指针减1移动几个字节 #include <stdio.h> int main(int argc, cha ...

  8. JS XMLHttpRequest.upload.addEventListener 传参，回调

    JS 回调函数,传参的办法. function uploadFile(t) { var fd = new FormData(); fd.append("_netLogo", doc ...

  9. Leetcode 592.分数加减运算

    分数加减运算 给定一个表示分数加减运算表达式的字符串,你需要返回一个字符串形式的计算结果. 这个结果应该是不可约分的分数,即最简分数. 如果最终结果是一个整数,例如 2,你需要将它转换成分数形式,其分 ...

随机推荐

  1. (O)JS核心：call、apply和bind

    1. var func=function(a,b,c){ console.log([a,b,c]); }; func.apply(null,[1,2,3]); //[1,2,3] func.call( ...

  2. 爬取掌阅app免费电子书数据

    主要介绍如何抓取app数据及抓包工具的使用,能看到这相信你已经有爬虫基础了 编不下去了,主要是我懒,直接开干吧! 一.使用环境和工具 windows + python3 + Jsonpath + Ch ...

  3. python爬虫_简单使用百度OCR解析验证码

    百度技术文档 首先要注册百度云账号: 在首页,找到图像识别,创建应用,选择相应的功能,创建 安装接口模块: pip install baidu-aip 简单识别一: 简单图形验证码: 图片: from ...

  4. 网页启用Gzip压缩 提高浏览速度

    启用Gzip压缩的好处 它的好处显而易见,提高网页浏览速度,无论是之前说的精简代码.压缩图片都不如启用Gzip来的实在.下图为启用Gzip后的效果. Gzip压缩效率非常高,通常可以达到70%的压缩率 ...

  5. [Robot Framework] 调用ExcelLibrary

    安装ExcelLibrary for Robot Framework 参考 : http://navinet.github.io/robotframework-excellibrary/ 打开wind ...

  6. Linux安装及入门

    Linux安装及学习 Linux遇到的问题: 在安装过程中因为代码输错(少空格)而质疑自己下载的ubuntu和virtualbox版本,于是卸载之后重新安装了一次,后来才发现是代码输错了(教程中的空格 ...

  7. Spring 系列教程之容器的功能

    Spring 系列教程之容器的功能 经过前面几章的分析,相信大家已经对 Spring 中的容器功能有了简单的了解,在前面的章节中我们一直以 BeanFacotry 接口以及它的默认实现类 XmlBea ...

  8. [转载]How To Install Nginx And PHP-FPM On CentOS 6 Via Yum

    http://www.lifelinux.com/how-to-install-nginx-and-php-fpm-on-centos-6-via-yum/ http://blog.csdn.net/ ...

  9. 阻塞式简易http服务器

    说明         使用java.net包的ServerSocket也是阻塞的,所以下面的实例把ServerSocketChannel换成ServerSocket效果一样. 后台代码 package ...

  10. rsync （转载）

    rsync 编辑   rsync是类unix系统下的数据镜像备份工具——remote sync. 目录 1简介 2特性 3操作流程 ▪ 服务器端启动 ▪ 客户端同步 4安装     1简介编辑 rsy ...