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 onclick="numDec()">-</span> <input type="text" id="quantity" /> <span onclick="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="展示" onclick="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>