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

最新推荐文章于 2022-04-14 16:03:14 发布

Mr.Gu

最新推荐文章于 2022-04-14 16:03:14 发布

阅读量1.2k

点赞数

文章标签： javascript 前端 xhtml ViewUI

原文链接：http://www.cnblogs.com/lqss/p/5864799.html

版权

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
 2 <html xmlns="http://www.w3.org/1999/xhtml">  
 3 <head>  
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
 5 <title>js数量加减</title>  
 6 <script type="text/javascript" src="http://www.jb51.net/Public/js/jquery.min.js"></script>  
 7   
 8 <script type="text/javascript">  
 9 /*或者不用jquery*/  
10 /*商品数量框输入*/  
11 function keyup(){  
12     var quantity = document.getElementById("quantity").value;  
13     if(isNaN(quantity) ||  parseInt(quantity)!=quantity || parseInt(quantity)<1){  
14         quantity = 1;  
15         return;  
16     }  
17     if(quantity>=10){  
18         document.getElementById("quantity").value=quantity.substring(0,quantity.length-1);  
19         alert("商品数量不能大于10");  
20     }  
21 }  
22   
23 /*商品数量+1*/  
24 function numAdd(){  
25     var quantity = document.getElementById("quantity").value;  
26     var num_add = parseInt(quantity)+1;  
27     var price=document.getElementById("price").value;  
28     if(quantity==""){  
29         num_add = 1;  
30     }  
31     if(num_add>=10){  
32         document.getElementById("quantity").value=num_add-1;  
33         alert("商品数量不能大于10");  
34     }else{  
35         document.getElementById("quantity").value=num_add;  
36         var Num=price*num_add;  
37         document.getElementById("totalPrice").innerHTML=Num.toFixed(2);  
38     }  
39 }  
40 /*商品数量-1*/  
41 function numDec(){  
42     var quantity = document.getElementById("quantity").value;  
43     var price=document.getElementById("price").value;  
44     var num_dec = parseInt(quantity)-1;  
45     if(num_dec>0){  
46         document.getElementById("quantity").value=num_dec;  
47         var Num=price*num_dec;  
48          document.getElementById("totalPrice").innerHTML=Num.toFixed(2);  
49     }  
50 }  
51 function show()  
52 {  
53     document.getElementById("totalPrice").innerHTML=3.25*3;  
54 }  
55 </script>  
56   
57 </head>  
58 <body>  
59  <p>Quantity: <span οnclick="numDec()">-</span> <input type="text" id="quantity" /> <span οnclick="numAdd()">+</span></p>  
60   <p class="sdsd">Total Price: <span id="totalPrice">28.10</span></p>  
61   <input type="hidden" value="28.1" id="price" /><!--单价-->  
62   <input type="button" value="展示" οnclick="show()"/>  
63 </body>  
64 </html>

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

 1 <script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
 2 <script type="text/javascript">
 3 $(function(){
 4    var price=0;
 5    $("#cut").click(function(){
 6          price=$("#num").val();
 7          if($("#num").val()==0){
 8          return
 9      }
10      else{
11          price--;
12      }
13      $("#num").val(price);
14    })
15    $("#add").click(function(){
16          price=$("#num").val();
17       price++;
18      $("#num").val(price);
19    })
20 })
21 </script>
22 <input id="cut" type="button"  value="-"/>
23 <input id="num" type="text" style=" width:20px; text-align:center" value="0"/>
24 <input id="add" type="button"  value="+"/>

方法3：

 1 <script type="text/JavaScript">
 2 function qtyUpdate(kind){
 3     var f = document.form1;
 4     var c = f.qty.value;
 5     if(kind == "up"){
 6         c++;
 7     }else if(kind == "down"){
 8         if(c > 1) c--;
 9     }
10     f.qty.value = c;
11 }
12 </script>
13 
14 <FORM  name="form1" >
15 <A href="javascript:qtyUpdate('down')">-</A>
16 <INPUT value=2 readOnly size=5 name="qty">
17 <A href="javascript:qtyUpdate('up')">+</A>
18 </FORM>
19 
20 
21 <script type="text/JavaScript">
22 function qtyUpdate11(kind){
23     var f = document.ipu;
24     var c = f.qcc.value;
25     if(kind == "jia"){
26         c++;
27     }else if(kind == "jian"){
28         if(c > 1) c--;
29     }
30     f.qcc.value = c;
31 }
32 </script>
33 
34 <FORM  name="ipu" >
35 <A href="javascript:qtyUpdate11('jian')">-</A>
36 <INPUT value="0" readOnly size="5" name="qcc">
37 <A href="javascript:qtyUpdate11('jia')">+</A>
38 </FORM>

转载于:https://www.cnblogs.com/lqss/p/5864799.html

Mr.Gu

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js实现输入框数量加减【转】

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <h...
复制链接

扫一扫