<!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. PAT 1049 数列的片段和(20)（代码+思路分析）

    1049 数列的片段和(20)(20 分) 给定一个正数数列,我们可以从中截取任意的连续的几个数,称为片段.例如,给定数列{0.1, 0.2, 0.3, 0.4},我们有(0.1) (0.1, 0.2 ...

  2. RNA测序研究现状与发展

    RNA测序研究现状与发展 1 2,584 A+ 所属分类:Transcriptomics   收  藏 通常来说,某一个物种体内所有细胞里含有的DNA都应该是一模一样的,只是因为每一种细胞里所表达的R ...

  3. 简单理解RNA-seq

    简单理解RNA-seq 刘小泽 已关注 2018.10.17 23:51* 字数 1518 阅读 46评论 0喜欢 3 今天就当一个小故事看吧,看了statQuest,感觉讲的很棒,于是分享给大家原版 ...

  4. LibreOJ #6007. 「网络流 24 题」方格取数 最小割 最大点权独立集 最大流

    #6007. 「网络流 24 题」方格取数 内存限制:256 MiB时间限制:1000 ms标准输入输出 题目类型:传统评测方式:文本比较 上传者: 匿名 提交提交记录统计讨论测试数据   题目描述 ...

  5. mysql bigint ,int , smallint,tinyint 的范围

    bigint  8字节 64位 int 4字节 32位 smallint 2字节 16位 tinyint 1字节8位 .. 范围  -128 到 127  , 如果是无符号 ,则返回 位 0-255 ...

  6. C#调用开源图像识别类库tessnet2

    首先下载tessnet2_32.dll及相关语言包,将dll加入引用 private tessnet2.Tesseract ocr = new tessnet2.Tesseract();//声明一个O ...

  7. EasyUI 分页 简洁代码

    做分页代码,看到网上很多人实现的方法,那是各种调用,各种获取对象.我很不解,因为Easyui已经给我们了分页的具体实现,为什么有些人要画蛇添足呢. 其实真正的分页,在你的代码中,别人可能都没有注意到, ...

  8. Linux／Python学习路线

    Linux: 初级阶段: 熟练掌握常用80个命令: 掌握Linux常用软件包的安装方法,如源码安装,rpm安装等: 学习安装设备驱动程序(如网卡,显卡驱动): 了解Grub/Lilo引导程序以及简单的 ...

  9. HDU3695(AC自动机模板题)

    题意:给你n个字符串,再给你一个大的字符串A,问你着n个字符串在正的A和反的A里出现多少个? 其实就是AC自动机模板题啊( ╯□╰ ) 正着query一次再反着query一次就好了 /* gyt Li ...

  10. 单片机一种简便的printf调试方案。

    此处引用csdn博客.链接如下. http://blog.csdn.net/cp1300/article/details/7773239 http://blog.csdn.net/aobai219/a ...