<!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. BZOJ2292——【POJ Challenge 】永远挑战

    1.题意:dijkstra模板题,存点模板 #include <queue> #include <cstdio> #include <cstdlib> #inclu ...

  2. 【项目】百度搜索广告CTR预估

    -------倒叙查看本文. 6,用auc对测试的结果进行评估: auc代码如下: #!/usr/bin/env python import sys def auc(labels,predicted_ ...

  3. jquery插件封装成seajs模块

    jquery直接在html中引入. jquery插件修改为: define(function (require, exports, moudles) { return function (jquery ...

  4. java 文件保存到本地

    private void savePic(InputStream inputStream, String fileName) { OutputStream os = null; try { Strin ...

  5. 报错:1130-host ... is not allowed to connect to this MySql server

    报错:1130-host ... is not allowed to connect to this MySql server   解决方法: 1. 改表法. 可能是你的帐号不允许从远程登陆,只能在l ...

  6. -bash: fork: retry: Resource temporarily unavailable

    登陆不了服务器The server refused to start a shell. 登陆服务器后执行ls命令报错:   1 2 $ls -bash: fork: retry: Resource t ...

  7. 「C++」理解智能指针

    维基百科上面对于「智能指针」是这样描述的: 智能指针(英语:Smart pointer)是一种抽象的数据类型.在程序设计中,它通常是经由类型模板(class template)来实做,借由模板(tem ...

  8. ubuntu下命令杂项

    一. 1.用sudo apt-get install python3-numpy之后,会默认把numpy安装到  /usr/lib/python3/dist-packages目录下,而且版本比较低. ...

  9. hdu 5901 count prime & code vs 3223 素数密度

    hdu5901题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5901 code vs 3223题目链接:http://codevs.cn/problem ...

  10. KNN识别图像上的数字及python实现

    领导让我每天手工录入BI系统中的数据并判断数据是否存在异常,若有异常点,则检测是系统问题还是业务问题.为了解放双手,我决定写个程序完成每天录入管理驾驶舱数据的任务.首先用按键精灵录了一套脚本把系统中的 ...