<!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. JavaScript的模块化之AMD&CMD规范

    前端开发常常会遇到的问题: 1.恼人的命名冲突: 2.繁琐的文件依赖: 模块化开发的优势: 1.解决命名冲突和依赖管理: 2.模块的版本管理: 3.提高代码的可维护性: 4.前端性能优化: JavaS ...

  2. BZOJ 3527: [Zjoi2014]力

    Description 求 \(E_i=\sum _{j=0}^{i-1} \frac {q_j} {(i-j)^2}-\sum _{j=i+1}^{n-1} \frac{q_j} {(i-j)^2} ...

  3. css3渐变

    background:-webkit-linear-gradient | radial-gradient (水平起点 垂直起点 , 颜色1  百分比%, 颜色2  百分比%, ... ,颜色N 100 ...

  4. gnu coreutils-8.25 for win32 static - Beta

    gnu.win32-coreutils-8.25.7z 2.7 Mb bc-1.06.tar.gz coreutils-8.25.tar.xz diffutils-3.5.tar.xz gawk-4. ...

  5. 定时器管理：nginx的红黑树和libevent的堆

    libevent 发生超时后, while循环一次从堆顶del timer——直到最新调整的最小堆顶不是超时事件为止,(实际是del event),但是会稍后把这个timeout的 event放到ac ...

  6. 循环冗余码crc

    待编码的有效信息组多项式:M(x) 生成多项式(产生校验码的多项式):G(x) 余数多项式:R(x) 商:Q(x) 生成多项式是四次的,所以某个多项式除以生成多项式的余式肯定是三次的,所以要加四位00 ...

  7. iOS系统验证关闭

    在浏览器上查看iOS系统与否方法:1.打开浏览器2.在地址栏中输入 ipsw.me3.在打开的网页中选择 Select a device 选择你要查看的设备型号:4.选择好设备之后点击select i ...

  8. Eclipse 一些小知识

    快速查找未完成事项 eg: // TODO 通过模板格式化代码 Window --> Preferences --> Java --> Editor  --> Template ...

  9. ionic + cordova+angularJs 搭建的H5 App完整版总结

      为期半个月的项目实践开发,已完整告一段落,团队小组获得第一名,辛苦总算没有白费,想起有一天晚上,整个小组的人,联调到12点才从公司回去,真是心酸.这里总结一下,项目过程中遇到的问题 和感悟.哈哈, ...

  10. centos7.0 安装redis集群

    生产环境下redis基本上都是用的集群,毕竟单机版随时都可能挂掉,风险太大.这里我就来搭建一个基本的redis集群,功能够用但是还需要完善,当然如果有钱可以去阿里云买云数据库Redis版的,那个还是很 ...