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 相关文章推荐
用JavaScript实现仿Windows关机效果
Mar 10 Javascript
JavaScript this调用规则说明
Mar 08 Javascript
jQuery操作 input type=checkbox的实现代码
Jun 14 Javascript
JS日期和时间选择控件升级版(自写)
Aug 02 Javascript
raphael.js绘制中国地图 地图绘制方法
Feb 12 Javascript
javascript怎么禁用浏览器后退按钮
Mar 27 Javascript
JavaScript实现简单评论功能
Aug 17 Javascript
详解微信小程序实现WebSocket心跳重连
Jul 31 Javascript
webpack打包多页面的方法
Nov 30 Javascript
Element Alert警告的具体使用方法
Jul 27 Javascript
基于vue hash模式微信分享#号的解决
Sep 07 Javascript
vue在图片上传的时候压缩图片
Nov 18 Vue.js
浅谈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中文件上传的一个问题
2010/09/04 PHP
PHP加密函数 Javascript/Js 解密函数
2013/09/23 PHP
微信公众号之主动给用户发送消息功能
2019/06/22 PHP
javascript 日期常用的方法
2009/11/11 Javascript
有关于eclipse配置spket需要注意的一些地方
2013/04/07 Javascript
jquery的ajax和getJson跨域获取json数据的实现方法
2014/02/04 Javascript
浅析基于WEB前端页面的页面内容搜索的实现思路
2014/06/10 Javascript
Extjs grid panel自带滚动条失效的解决方法
2014/09/11 Javascript
jQuery支持动态参数将函数绑定到事件上的方法
2015/03/17 Javascript
jquery专业的导航菜单特效代码分享
2015/08/29 Javascript
javascript实现3D切换焦点图
2015/10/16 Javascript
Jquery检验手机号是否符合规则并根据手机号检测结果将提交按钮设为不同状态
2015/11/26 Javascript
jQuery实现元素拖拽并cookie保存顺序的方法
2016/02/20 Javascript
JavaScript中创建对象的7种模式详解
2017/02/21 Javascript
vue项目打包后打开页面空白解决办法
2018/06/29 Javascript
浅谈Vue.js 中的 v-on 事件指令的使用
2018/11/25 Javascript
微信小程序学习笔记之目录结构、基本配置图文详解
2019/03/28 Javascript
实例详解vue中的$root和$parent
2019/04/29 Javascript
vue-cli配置flexible过程详解
2019/07/04 Javascript
如何实现一个简易版的vuex持久化工具
2019/09/11 Javascript
jquery 时间戳转日期过程详解
2019/10/12 jQuery
Array.filter中如何正确使用Async
2020/11/04 Javascript
vue实现表格合并功能
2020/12/01 Vue.js
Python中pip安装非PyPI官网第三方库的方法
2015/06/02 Python
在 Python 应用中使用 MongoDB的方法
2017/01/05 Python
简单谈谈python中的语句和语法
2017/08/10 Python
Python 多线程Threading初学教程
2017/08/22 Python
Python数据可视化 pyecharts实现各种统计图表过程详解
2019/08/15 Python
对python中的装包与解包实例详解
2019/08/24 Python
python文件绝对路径写法介绍(windows)
2019/12/25 Python
selenium+超级鹰实现模拟登录12306
2021/01/24 Python
HTML5如何为形状图上颜色怎么绘制具有颜色和透明度的矩形
2014/06/23 HTML / CSS
选购世界上最好的美妆品:Cult Beauty
2017/11/03 全球购物
大学生职业生涯规划范文
2014/01/22 职场文书
社区党支部承诺书
2015/04/29 职场文书
感恩父母主题班会
2015/08/12 职场文书