js实现仿购物车加减效果

2024-10-25 23:29:29

效果图：

代码如下：

<!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做的 css <style> table{ text-align: center; } table img{ width: 50px; } a { text-decoration: none; color: red; } </style> body <table border="1" cellspacing="0"> <thead> <tr> <th&
JavaScript编写一个简易购物车功能

网上关于购物车实现的代码非常多,今天看了一些知识点,决定自己动手写写,于是写了一个简易购物车,接下来讲解一下具体的实现. 1.用html实现内容: 2.用css修饰外观: 3.用js(jq)设计动效. 第一步:首先是进行html页面的设计,我用一个大的div将所有商品包含,然后用不同的div将不同的商品进行封装,商品列表中我用了ul li实现,具体实现代码如下(代码中涉及到的商品都是网上随便copy的,不具有参考价值): <div id="goods"> <div c
js购物车实现思路及代码(个人感觉不错)

复制代码代码如下: <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServer
Javascript操纵Cookie实现购物车程序

复制代码代码如下: /***************************************************************************************************** Name 购物车 Version 1.1 Author Vanni(凡林) url:www.27sea.com QQ:303590170 CreateDate 2005-05-31 Description 此类是基于JavaScript和客户端Cookie,请保证客户端开
js实现商品抛物线加入购物车特效

本文实例为大家分享了js实现商品抛物线加入购物车动画代码,供大家参考,具体内容如下 parapola.js /*! * by zhangxinxu(.com) 2012-12-27 * you can visit http://www.zhangxinxu.com/wordpress/?p=3855 to get more infomation * under MIT license */ var funParabola = function(element, target, options)
原生js模拟淘宝购物车项目实战

本文实例讲述了原生js模拟淘宝购物车实现代码.分享给大家供大家参考.具体如下: 通过JavaScript实现类似与淘宝的购物车效果,包括商品的单选.全选.删除.修改数量.价格计算.数目计算.预览等功能的实现.实现的效果图: 相应的代码: shoppingCart.html <!DOCTYPE html> <html> <head> <meta charset = "UTF-8"> <title>JavaScript实现购物车项
js实现简单的购物车有图有代码

如图: 全选按钮的实现为: 复制代码代码如下: <input type="checkbox" name="all" onclick="checkAll()" />全选<br /> <input type="checkbox" name="item" value="3000" />笔记本电脑:3000元<br /> <input t
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{ widt
jQuery实现购物车数字加减效果

我们在网上购物提交订单时,在网页上一般会有一个选择数量的控件,要求买家选择购买商品的件数,开发者会把该控件做成可以通过点击实现加减等微调操作,当然也可以直接输入数字件数.本文将介绍常见的几种使用spinner数字微调器来实现数字加减的功能的方法. 左右加减数字像京东提交订单时目前使用的是左右加减数字的效果,这个效果直接明了,操作简单.我们使用jquery.spinner.js插件实现左右加减数字,调用方法非常简单,请看演示示例1. 复制代码代码如下: <input type="text
js实现购物车加减和价格运算

本文实例为大家分享了js实现购物车加减和价格运算的具体代码,供大家参考,具体内容如下主要实现功能:购物车的加减,单件商品价格的运算,总价格的运算.价格保留两位小数. <div class="content"> <div class="logo"> <img src="images/dd_logo.jpg"><span onclick="guan()">关闭</span&g
js实现购物车加减以及价格计算功能

本文实例为大家分享了js实现购物车加减以及价格计算的具体代码,供大家参考,具体内容如下需求说明: 1.单击"半闭"按钮时,关闭当前页面购物车页面 2.单击"移入收藏"弹出收藏提示 3.单击"删除"弹出确认删除提示 4.单击"结算"按钮,弹出结算信息页面窗口 5.自动计算商品总计 6.单击"删除"按钮,使用parentNode访问当前节点的父亲节点等,使用removeChild( )删除当前商品效果图:
vue实现购物车加减

本文实例为大家分享了vue实现购物车加减的具体代码,供大家参考,具体内容如下通常我们会在模板中绑定表达式,模板是用来描述视图结构的.如果模板中的表达式存在过多的逻辑,模板会变得臃肿不堪,维护变得非常困难.因此,为了简化逻辑,当某个属性的值依赖于其他属性的值时,我们可以使用计算属性. 那么什么是计算属性呢? 计算属性就是当其依赖属性的值发生变化是,这个属性的值会自动更新,与之相关的DOM部份也会同步自动更新. 实现的效果图如下: 我是使用了bootstrap跟Vue去完成这个效果的. 首先导入包
原生js实现仿window10系统日历效果的实例

舞动的灵魂版js日历,完全采用js实现,故而实现了与语言无关,jsp.asp.net php asp均可使用.无论你是开发软件,还是网站,均是不可或缺的实用代码. 该日历主要实现了获取当前时间时分秒,年月日星期,动态生成选择年的select,月的select,然后根据你所选中的年月,显示该年月对应的这一个月的日期. 点击上一个月,下一个月按钮,在下拉列表中显示对应的年月. <!DOCTYPE html> <html lang="en"> <head>
jQuery实现数字加减效果汇总

我们在网上购物提交订单时,在网页上一般会有一个选择数量的控件,要求买家选择购买商品的件数,开发者会把该控件做成可以通过点击实现加减等微调操作,当然也可以直接输入数字件数. 左右加减数字像京东提交订单时目前使用的是左右加减数字的效果,这个效果直接明了,操作简单.我们使用jquery.spinner.js插件实现左右加减数字,调用方法非常简单. 复制代码代码如下: <input type="text" class="spinner"/> 调用也非常简单,
JS实现仿PS的调色板效果完整实例

本文实例讲述了JS实现仿PS的调色板效果.分享给大家供大家参考,具体如下: 运行效果图如下: 完整实例代码: <html> <head> <style> #colorpad table{ border-collapse:collapse; cellpadding:0; cellspacing:0; width:255px; height:255px; border:0; } #colorpadright table{ border-collapse:collapse;
Android组合式自定义控件实现购物车加减商品操作

本文实例为大家分享了Android实现购物车加减商品操作的具体代码,供大家参考,具体内容如下 MainActivity.java public class MainActivity extends AppCompatActivity { private Addand mAddand; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setConte
Android 购物车加减功能的实现代码

Android 实现购物车加减功能,效果图如下所示: public class adderView extends LinearLayout implements View.OnClickListener, TextWatcher { private int amount = 0; //购买数量 private int goods_storage = Integer.MAX_VALUE; //商品库存 private OnAmountChangeListener mListener; priva

js实现仿购物车加减效果

相关推荐

随机推荐