代码如下：

<!DOCTYPE html>

<html>

 <head>

 <meta charset="UTF-8">

 <title></title>

 <style>

  *{

  margin: 0;

  padding: 0;

  }

  body{

  overflow-y: auto;

  }

  ul{

  margin-top: 20px;

  border-top: 1px solid #666;

  }

  h1{

  width: 500px;

  margin: 0 auto;

  color: deeppink;

  height: 100px;

  line-height: 100px;

  }

  li{

  list-style: none;

  padding: 15px 0px 15px 60px;

  border-bottom:1px solid #ccc;

  font-size: 0px;

  line-height: 30px;

  /*height: 60px;*/

  }

  input[type=button],li strong,li em,li span,li div{

  height: 30px;

  font-size: 20px;

  line-height: 30px;

  text-align: center;

  }

  input[type=button],li strong

  {

  width: 60px;

  }

  li span,li em{

  width: 80px;

  background: pink;

  }

  li div{

  width: 100px;

  }

  li strong,li span,li em,li div{

  display: inline-block;

  }

 </style>

 <script>

  window.onload=function(){

  var oUl=document.getElementById('list');

  var aLi=oUl.getElementsByTagName('li');

  for(var i=0;i<aLi.length;i++){

   fn1(aLi[i]);

  }

  function fn1(aLi){

   var aBtn=aLi.getElementsByTagName('input');

   var aStrong=aLi.getElementsByTagName('strong')[0];

   var aEm=aLi.getElementsByTagName('em')[0];

   var aSpan=aLi.getElementsByTagName('span')[0];

   var num=Number(aStrong.innerHTML); //aStrong.innerHTML='0'

   var price=parseFloat(aEm.innerHTML);//aEm.innerHTML='12.9元'

   aBtn[0].onclick=function(){

   if(num>0)

   {

   num--;

   aStrong.innerHTML=num;

   aSpan.innerHTML=(num*price).toFixed(1)+'元'

   }

   }

   aBtn[1].onclick=function(){

   num++;

   aStrong.innerHTML=num;

   aSpan.innerHTML=(num*price).toFixed(1)+'元'

   }

  }

  }

 </script>

 </head>

 <body>

 <h1>点点看，仿购物车+ -效果</h1>

 <ul id="list">

  <li>

  <input type="button" value="-" />

  <strong>0</strong>

  <input type="button" value="+" />

  <div class="s1">单价:</div><em>12.9元</em>

  <div class="s1">共计：</div><span>0</span>

  </li>

  <li>

  <input type="button" value="-" />

  <strong>0</strong>

  <input type="button" value="+" />

  <div class="s1">单价:</div><em>45.7元</em>

  <div class="s1">共计：</div><span>0</span>

  </li>

  <li>

  <input type="button" value="-" />

  <strong>0</strong>

  <input type="button" value="+" />

  <div class="s1">单价:</div><em>67.5元</em>

  <div class="s1">共计：</div><span>0</span>

  </li>

  <li>

  <input type="button" value="-" />

  <strong>0</strong>

  <input type="button" value="+" />

  <div class="s1">单价:</div><em>14.7元</em>

  <div class="s1">共计：</div><span>0</span>

  </li>

  <li>

  <input type="button" value="-" />

  <strong>0</strong>

  <input type="button" value="+" />

  <div class="s1">单价:</div><em>45.6元</em>

  <div class="s1">共计：</div><span>0</span>

  </li>

  <li>

  <input type="button" value="-" />

  <strong>0</strong>

  <input type="button" value="+" />

  <div class="s1">单价:</div><em>32.4元</em>

  <div class="s1">共计：</div><span>0</span>

  </li>

 </ul>

 </body>

</html>

js实现仿购物车加减效果的更多相关文章

  1. js实现购买数量加减效果

    写在前面:当我们需要在多个页面都有操作数量的需求时的一种解决方案 结构: js代码: <script type="text/javascript"> function ...

  2. JQuery案例：购物车加减

    购物车加减 <head> <meta charset="UTF-8"> <title>加减购物车</title> <style ...

  3. js实现输入框数量加减【转】

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

  4. 用js进行日期的加减

    如题,开始查了查js的使用文档,但没发现可以直接用的函数,于是就想自己写函数来着,这就要涉及到每个月天数的判断,如果是2月份的话,还要涉及到闰年的判断,虽然不复杂但我想js应该不会这么低级,于是查了下 ...

  5. Js中处理日期加减天数

    Js的处理日期还是很方便的. 一. 格式化日期为2017-07-04的格式 function formatTime(date) { var year = date.getFullYear(); var ...

  6. js 时间格式，加减

    Date.prototype.Format = function (fmt) { //author: rixiao var o = { "M+": this.getMonth() ...

  7. js 购物车中，多件商品数量加减效果修改，实现总价随数量加减改变

    <!DOCTYPE html> <html> <head> <meta charset=UTF-8 /> <title>无标题文档</ ...

  8. 原生js实现仿window10系统日历效果

    舞动的灵魂版js日历,完全采用js实现,故而实现了与语言无关,jsp.asp.net php asp均可使用.无论你是开发软件,还是网站,均是不可或缺的实用代码. 该日历主要实现了获取当前时间时分秒, ...

  9. spin.js插件的转圈加载效果

    先上插件链接地址:http://fgnass.github.io/spin.js/ 以下是使用spin.js插件的完整版测试例子: <!doctype html> <html> ...

随机推荐

  1. flutter 快捷键

    1.热重载 alt+\ 2.热重启 alt+shift+\ 3.快速生成模板 stf 直接生成有状态模板 4.模拟器中文输入法 http://www.mdpda.com/app/apk3670941. ...

  2. 洛谷 P3371 【模板】单源最短路径 【链式前向星+SPFA】

    题目描述 如题,给出一个有向图,请输出从某一点出发到所有点的最短路径长度. 输入输出格式 输入格式: 第一行包含三个整数N.M.S,分别表示点的个数.有向边的个数.出发点的编号. 接下来M行每行包含三 ...

  3. Codeforces 1059E. Split the Tree

    题目:http://codeforces.com/problemset/problem/1059/E 用倍增可以在nlog内求出每个节点占用一个sequence 时最远可以向父节点延伸到的节点,对每个 ...

  4. 洛谷——P2128 赤壁之战

    P2128 赤壁之战 题目描述 赤壁之战,黄盖率舰满载薪草膏油诈降曹军. 受庞统所授的连环计,曹军战船之间由铁索相连,没有两艘战船在同一位置,也没有铁索两两相交或穿过战船.每艘船都有其一定的战略价值. ...

  5. 2、Flask实战第2天：URL传参

    当我们访问网站/的时候,会执行hell_world函数,并把这个函数的返回值返回给浏览器,这样浏览器就显示hello world了 @app.route('/') def hello_world(): ...

  6. 在MYSQL中插入当前时间，就象SQLSERVER的GETDATE（）一样，以及对mysql中的时间日期操作。

    在看sql教程的时候,我学的是mysql,但是教程上面的一点在mysql里面是不支持的,所以就找了其他的替代的办法 sql教程上面是这样的: 通过使用类似 GETDATE() 这样的函数,DEFAUL ...

  7. Android开机过程

    韩梦飞沙  韩亚飞  313134555@qq.com  yue31313  han_meng_fei_sha Android开机过程 BootLoder引导,然后加载Linux内核. 0号进程ini ...

  8. POJ 3728 The merchant（并查集+DFS）

    [题目链接] http://poj.org/problem?id=3728 [题目大意] 给出一棵树,每个点上都可以交易货物,现在给出某货物在不同点的价格, 问从u到v的路程中,只允许做一次买入和一次 ...

  9. 【容斥原理】CDOJ - 1544 - 当咸鱼也要按照基本法

    众所周知zhu是一个大厨,zhu一直有自己独特的咸鱼制作技巧. tang是一个咸鱼供应商,他告诉zhu在他那里面有NN条咸鱼(标号从1到N)可以被用来制作. 每条咸鱼都有一个咸鱼值KiKi,初始时所有 ...

  10. 更新xcode后插件失效问题——不针对特定版本的通用解决方法

    一.Xcode更新后插件失效的原理 1.每次更新Xcode后插件都会失效,其实插件都还在这个目录好好的躺着呢: ~/Library/Application Support/Developer/Shar ...