js实现仿购物车加减效果


Posted in Javascript onMarch 01, 2017

效果图:

 js实现仿购物车加减效果

 代码如下:

<!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>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
一个JS翻页效果
Jul 23 Javascript
一个js写的日历(代码部分网摘)
Sep 20 Javascript
ASP.NET jQuery 实例10 动态修改hyperlink的URL值
Feb 03 Javascript
JavaScript实现页面实时显示当前时间的简单实例
Jul 20 Javascript
location.hash保存页面状态的技巧
Apr 28 Javascript
jQuery删除节点用法示例(remove方法)
Sep 08 Javascript
JS实现动态增加和删除li标签行的实例代码
Oct 16 Javascript
JS传参及动态修改页面布局
Apr 13 Javascript
jQuery Jsonp跨域模拟搜索引擎
Jun 17 jQuery
初学者AngularJS的环境搭建过程
Oct 27 Javascript
JS实现统计字符串中字符出现个数及最大个数功能示例
Jun 04 Javascript
vue+element 实现商城主题开发的示例代码
Mar 26 Javascript
浅谈js中startsWith 函数不能在任何浏览器兼容的问题
Mar 01 #Javascript
js实现拖拽功能
Mar 01 #Javascript
js实现下拉菜单效果
Mar 01 #Javascript
JS实现复制功能
Mar 01 #Javascript
node.js利用redis数据库缓存数据的方法
Mar 01 #Javascript
JS三目运算(三元运算)方法详解
Mar 01 #Javascript
vue-router 学习快速入门
Mar 01 #Javascript
You might like
分享PHP入门的学习方法
2007/01/02 PHP
Php Cookie的一个使用注意点
2008/11/08 PHP
VB中的RasEnumConnections函数返回632错误解决方法
2014/07/29 PHP
Zend Framework自定义Helper类相关注意事项总结
2016/03/14 PHP
thinkPHP自动验证、自动添加及表单错误问题分析
2016/10/17 PHP
centos下file_put_contents()无法写入文件的原因及解决方法
2017/04/01 PHP
在JavaScript中遭遇级联表达式陷阱
2007/03/08 Javascript
基于jQuery的倒计时插件代码
2011/05/07 Javascript
关于jQuery对象数据缓存Cache原理以及jQuery.data详解
2013/04/07 Javascript
EasyUI中datagrid在ie下reload失败解决方案
2015/03/09 Javascript
JS模式之简单的订阅者和发布者模式完整实例
2015/06/30 Javascript
JS控制按钮10秒钟后可用的方法
2015/12/22 Javascript
Summernote实现图片上传功能的简单方法
2016/07/11 Javascript
AngularJS extend用法详解及实例代码
2016/11/15 Javascript
浅谈Javascript中的Label语句
2016/12/14 Javascript
JS实现Ajax的方法分析
2016/12/20 Javascript
JavaScript基于对象方法实现数组去重及排序操作示例
2018/07/10 Javascript
Vuex模块化应用实践示例
2020/02/03 Javascript
Quasar Input:type=&quot;number&quot; 去掉上下小箭头 实现加减按钮样式功能
2020/04/09 Javascript
[00:50]深扒TI7聊天轮盘语音出处6
2017/05/11 DOTA
详解Python装饰器由浅入深
2016/12/09 Python
python 对dataframe下面的值进行大规模赋值方法
2018/06/09 Python
python selenium 弹出框处理的实现
2019/02/26 Python
Python ini文件常用操作方法解析
2020/04/26 Python
Django 解决由save方法引发的错误
2020/05/21 Python
Python远程方法调用实现过程解析
2020/07/28 Python
Canvas 文本转粒子效果的实现代码
2019/02/14 HTML / CSS
武汉世纪畅想数字传播有限公司 .NET笔试题
2015/06/13 面试题
运动会通讯稿300字
2014/02/02 职场文书
党的群众路线教育实践活动个人整改措施材料
2014/11/04 职场文书
租车协议书
2015/01/27 职场文书
车间质检员岗位职责
2015/04/08 职场文书
幼儿园推普周活动总结
2015/05/07 职场文书
新闻稿件写作技巧
2015/07/18 职场文书
三八节活动简报
2015/07/20 职场文书
PhpSpreadsheet中文文档 | Spreadsheet操作教程实例
2021/04/01 PHP