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

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>js数量加减</title>

 <script type="text/javascript" src="http://www.jb51.net/Public/js/jquery.min.js"></script>  

 <script type="text/javascript">

 /*或者不用jquery*/

 /*商品数量框输入*/

 function keyup(){

     var quantity = document.getElementById("quantity").value;

     if(isNaN(quantity) ||  parseInt(quantity)!=quantity || parseInt(quantity)<1){

         quantity = 1;

         return;

     }

     if(quantity>=10){

         document.getElementById("quantity").value=quantity.substring(0,quantity.length-1);

         alert("商品数量不能大于10");

     }

 }  

 /*商品数量+1*/

 function numAdd(){

     var quantity = document.getElementById("quantity").value;

     var num_add = parseInt(quantity)+1;

     var price=document.getElementById("price").value;

     if(quantity==""){

         num_add = 1;

     }

     if(num_add>=10){

         document.getElementById("quantity").value=num_add-1;

         alert("商品数量不能大于10");

     }else{

         document.getElementById("quantity").value=num_add;

         var Num=price*num_add;

         document.getElementById("totalPrice").innerHTML=Num.toFixed(2);

     }

 }

 /*商品数量-1*/

 function numDec(){

     var quantity = document.getElementById("quantity").value;

     var price=document.getElementById("price").value;

     var num_dec = parseInt(quantity)-1;

     if(num_dec>0){

         document.getElementById("quantity").value=num_dec;

         var Num=price*num_dec;

          document.getElementById("totalPrice").innerHTML=Num.toFixed(2);

     }

 }

 function show()

 {

     document.getElementById("totalPrice").innerHTML=3.25*3;

 }

 </script>  

 </head>

 <body>

  <p>Quantity: <span onclick="numDec()">-</span> <input type="text" id="quantity" /> <span onclick="numAdd()">+</span></p>

   <p class="sdsd">Total Price: <span id="totalPrice">28.10</span></p>

   <input type="hidden" value="28.1" id="price" /><!--单价-->

   <input type="button" value="展示" onclick="show()"/>

 </body>

 </html>

第二种方法：不包含计算价格

 <script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>

 <script type="text/javascript">

 $(function(){

    var price=0;

    $("#cut").click(function(){

          price=$("#num").val();

          if($("#num").val()==0){

          return

      }

      else{

          price--;

      }

      $("#num").val(price);

    })

    $("#add").click(function(){

          price=$("#num").val();

       price++;

      $("#num").val(price);

    })

 })

 </script>

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

 <input id="num" type="text" style=" width:20px; text-align:center" value="0"/>

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

方法3：

 <script type="text/JavaScript">

 function qtyUpdate(kind){

     var f = document.form1;

     var c = f.qty.value;

     if(kind == "up"){

         c++;

     }else if(kind == "down"){

         if(c > 1) c--;

     }

     f.qty.value = c;

 }

 </script>

 <FORM  name="form1" >

 <A href="javascript:qtyUpdate('down')">-</A>

 <INPUT value=2 readOnly size=5 name="qty">

 <A href="javascript:qtyUpdate('up')">+</A>

 </FORM>

 <script type="text/JavaScript">

 function qtyUpdate11(kind){

     var f = document.ipu;

     var c = f.qcc.value;

     if(kind == "jia"){

         c++;

     }else if(kind == "jian"){

         if(c > 1) c--;

     }

     f.qcc.value = c;

 }

 </script>

 <FORM  name="ipu" >

 <A href="javascript:qtyUpdate11('jian')">-</A>

 <INPUT value="0" readOnly size="5" name="qcc">

 <A href="javascript:qtyUpdate11('jia')">+</A>

 </FORM>

js实现输入框数量加减【转】的更多相关文章

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

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

  2. js 购物车的数量加减，对应的总价也随机变化

    html相关的源码: <div class="goods_num clearfix"> <div class="num_name fl"> ...

  3. 自己动手丰衣足食之 jQuery 数量加减插件

    引言 做一个手机端的订单相关项目中,其中下订单时需要用到数量加减的控件,可以设置默认值,也可以设置最大值和最小值.使用jQuery这么长时间了,平时很少去编写属于自己的插件,现在编写的时候对立面的一些 ...

  4. web框架实现购物车数量加减

    企业开发中经常是团队协作,每个人分配一个小的模块,比如说购物车模块,数量加减这一块人们首先想到的就是通过jquery实现,其实作为一个后端接口开发的程序猿也可以用自己更擅长的后端的逻辑代码来实现,那我 ...

  5. js jquery 权限单选 bug修改以及正确代码 购物车数量加减

    效果图废话不多直接上代码 用的avalon渲染,其实都是一样的 <div class="shop-arithmetic"> <a href="javas ...

  6. vue 入门 ------简单购物车功能实现(全选，数量加减，价格加减）

    简易购物车功能(无任何布局 主要是功能) 数量的加减 商品的总价钱 全选与全不选 删除(全选.价格 受影响) <script src="https://cdn.jsdelivr.net ...

  7. 用js进行日期的加减

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

  8. Android 自定义控件 EditText输入框两边加减按钮Button

    自己封装的一个控件:EditText两边放加减按钮Button来控制输入框的数值 Demo 下载地址: 第一版:http://download.csdn.net/detail/zjjne/674086 ...

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

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

随机推荐

  1. css text-overflow:ellipsis 文字多余剪切

    text-overflow: ellipsis;多度剪切white-space: nowrap;禁止换行overflow: hidden;多余隐藏

  2. Xcode的一个简单的UITests

    国内写Tests的很少,写UITests的更少了...或许只是我眼见不够开阔.网上那么几篇都是Swift的.这里给个简单的OC. - (void)viewDidLoad { [super viewDi ...

  3. 枚举扩展方法获取枚举Description

    枚举扩展方法 /// <summary> /// 扩展方法,获得枚举的Description /// </summary> /// <param name="v ...

  4. gnuWin32-mini-2016.10.30

    2016-10-28 04:48 1,017,856 awk.exe ver 4.1.4 2016-10-29 00:26 77,312 bc.exe ver 1.06 2016-10-30 01:4 ...

  5. silverlight 流程设计器，流程引擎

    (图一流程设计器包含元素) (图一流程设计器实现功能) (流程引擎工作原理) (流程数据库设计) (流程数据库设计) (流程数据库设计) (工作流程设计器实现效果图) (代码结构图) 无法上传附件,需 ...

  6. java回调机制

    http://www.cnblogs.com/heshuchao/p/5376298.html

  7. C# RSA加密解密

    1.解析密钥 /// <summary> /// 把二进制密钥解析成RSACryptoServiceProvider /// </summary> /// <param ...

  8. php 封装 知识点

    类由众多对象抽象出来的对象由类实例化出来的 成员变量成员方法成员属性 访问修饰符public 公有的protected 受保护的private 私有的 构造函数1.写法特殊2.执行时间特殊 面向对象的 ...

  9. 从源代码剖析Mahout推荐引擎

    转载自:http://blog.fens.me/mahout-recommend-engine/ Hadoop家族系列文章,主要介绍Hadoop家族产品,常用的项目包括Hadoop, Hive, Pi ...

  10. Python学习笔记(3)

      1.元组 元组的定义符号是() ,元素定义与列表完全一致.不同的是元组的内容是不可变的. 2.字典 字典里面的内容是无序的. 字典的元素组成形式是 key:value key的定义规则:key是不 ...