<!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. 《转载》使用org.w3c.dom.Element的setTextContent()、getTextContent()方法时出现编译错误

    今天在更新项目后进行编译时,出现如下错误一堆: 编译错误 Google之,在stackoverflow上看到如下的解决方法: I came here with the same problem. Ev ...

  2. Sublime 3 如何设置xftp 排除文件夹“bower_components”，“node_modules”

    “bower_components”,“node_modules”这个文件夹,作为模块得引用文件,不需要下载本地进行编码,这里得文件非常多,若是不把这个两个文件夹排除掉掉话,通过xftp下载所有文件的 ...

  3. SDWebImage清理图片缓存方法

    //获取当前缓存大小 @property (nonatomic, assign) NSUInteger tmpSize; //获取缓存大小并储存 _tmpSize=[[SDImageCache sha ...

  4. SQL表值函数(上月添加1-28)

    ALTER function [dbo].[fn_getdate3] ( ) ) RETURNS @Table_Var TABLE ( LastTime datetime ) as begin Dec ...

  5. ios Carthage

    使用CocoaPods来管理第三方框架很多人都知道,相对来说Carthage比较陌生,Carthage也是来管理第三方框架的,既然已经有了Cocoapods为什么还要有Carthage呢?使用Cart ...

  6. IE8下String的Trim()方法失效的解决方案

    简洁方便 用jquery的trim()方法,$.trim(str)就可以了.

  7. Date、Calender类及日期和字符串转换

    Calendar是一个抽象类,抽象类java.util.Calendar 不可以通过new来获取一个实例,可以通过类方法getinstance()获取此类型的一个通用的对象 ①用法: Calendar ...

  8. UIAlertController使用

    // 将UIAlertController模态出来 相当于UIAlertView show 的方法// 初始化一个一个UIAlertController    // 参数preferredStyle: ...

  9. Windows下用tree命令生成目录树

    有时候我们想为某个目录制作一个文档结构图,在Windows上,我们知道是使用tree命令. 但是,默认情况下tree只显示子目录名,而不显示子目录里的文件名,需要加上/F参数才能显示完整的文件名.   ...

  10. 17.Java 反射机制

    1.反射的定义 反射之中包含了一个"反"的概念,所以要想解释反射就必须先从"正"开始解释,一般而言,当用户使用一个类的时候,应该先知道这个类,而后通过这个类产生 ...