js实现输入框数量加减【转】

 <!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实现输入框数量加减【转】的更多相关文章

js实现购买数量加减效果
写在前面:当我们需要在多个页面都有操作数量的需求时的一种解决方案结构: js代码: <script type="text/javascript"> function ...
js 购物车的数量加减，对应的总价也随机变化
html相关的源码: <div class="goods_num clearfix"> <div class="num_name fl"> ...
自己动手丰衣足食之 jQuery 数量加减插件
引言做一个手机端的订单相关项目中,其中下订单时需要用到数量加减的控件,可以设置默认值,也可以设置最大值和最小值.使用jQuery这么长时间了,平时很少去编写属于自己的插件,现在编写的时候对立面的一些 ...
web框架实现购物车数量加减
企业开发中经常是团队协作,每个人分配一个小的模块,比如说购物车模块,数量加减这一块人们首先想到的就是通过jquery实现,其实作为一个后端接口开发的程序猿也可以用自己更擅长的后端的逻辑代码来实现,那我 ...
js jquery 权限单选 bug修改以及正确代码购物车数量加减
效果图废话不多直接上代码用的avalon渲染,其实都是一样的 <div class="shop-arithmetic"> <a href="javas ...
vue 入门 ------简单购物车功能实现(全选，数量加减，价格加减）
简易购物车功能(无任何布局主要是功能) 数量的加减商品的总价钱全选与全不选删除(全选.价格受影响) <script src="https://cdn.jsdelivr.net ...
用js进行日期的加减
如题,开始查了查js的使用文档,但没发现可以直接用的函数,于是就想自己写函数来着,这就要涉及到每个月天数的判断,如果是2月份的话,还要涉及到闰年的判断,虽然不复杂但我想js应该不会这么低级,于是查了下 ...
Android 自定义控件 EditText输入框两边加减按钮Button
自己封装的一个控件:EditText两边放加减按钮Button来控制输入框的数值 Demo 下载地址: 第一版:http://download.csdn.net/detail/zjjne/674086 ...
Js中处理日期加减天数
Js的处理日期还是很方便的. 一. 格式化日期为2017-07-04的格式 function formatTime(date) { var year = date.getFullYear(); var ...

随机推荐

NVelocity
迭代内置对象: velocityCount 集合数 : count NVelocity遇到不能处理的引用时,一般会直接输出标签名称. 在$符号后加个!号,出现Null时,标签的内容就会显示空白 ...
设计模式--原型模式Prototype（创建型）
一.原型模式用原型实例指定创建对象的种类,并通过拷贝这些原型创建新的对象.原型模式实现的关键就是实现Clone函数,还需要实现深拷贝. 二.UML类图三.例子 //父类 class Resume ...
关于试用jquery的jsonp实现ajax跨域请求数据的问题
我们在开发过程中遇到要获取另一个系统数据时,就造成跨域问题,这就是下文要说的解决办法: 先我们熟悉下json和jsonp的区别: 使用AJAX就会不可避免的面临两个问题,第一个是AJAX以何种格式来交 ...
MYsql 数据库密码忘记（Linux）
在Linux 上面装上了 Mysql 数据库,但是发现密码忘了,悲催,解决方法跟Window系统下一样的, 不管是哪个操作系统处理的思路是相同的,就是首先要把mysql的权限去掉,这样即使忘了密码,不 ...
【笔记】mysql两条数据的某个属性值互换
update groupuser as g1 join groupuser as g2 on (g1.user_id=1 and g2.user_id = 2) or(g1.user_id = 2 a ...
HTML学习笔记--HTML的语法【1】
1.什么是HTML标记语言? HTML是表示网页信息的符号标记语言. 2.HTML的标记和他的属性 HTML文档的保存格式:.html..htm..xhtml 标记和被标记的内容构建出HTML文档.格 ...
Python 下载网络mp4视频资源
最近着迷化学, 特别是古代的冶炼技术,感叹古人的聪明. 春秋时期的炼铁方法是块炼铁,即在较低的冶炼温度下,将铁矿石固态还原获得海绵铁,再经锻打成的铁块.冶炼块炼铁,一般采用地炉.平地筑炉和竖炉3种.铁 ...
Microsoft VS 2008 过期解决方法破解方法
Microsoft VS 2008 过期解决方法电脑上的Microsoft Visual Studio 2008 Team System 试用版提示离过期还有**天.于是百度,搜索结果大多是以下两种解 ...

js实现输入框数量加减【转】

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

随机推荐

热门专题