html+javascript实现数字微调,点击一下增加1或减去1

我们在购物的时候最容易见到这样的框框:

 

点击向上的按钮数字加1,点击向下的按钮数字减1,实现微调的效果,而且输入框中只能输入数字。今天自己动手写了一个,代码如下:

  
  
  
  
  1. <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN"  
  2.     "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"> 
  3. <html xmlns="http://www.w3.org/1999/xhtml"> 
  4. <head> 
  5.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
  6.     <SCRIPT type="text/javascript"> 
  7.         <!--          
  8.         var numMin = 1;  
  9.         var numMax = 10;  
  10.         function add(){  
  11.             var num = document.getElementById("num").value;       
  12.             if(num==numMax || num > numMax){  
  13.                 document.getElementById("num").value = numMin;  
  14.             }else{  
  15.                 document.getElementById("num").value++;  
  16.             }  
  17.         }  
  18.           
  19.         function minus(){  
  20.             var num = document.getElementById("num").value;  
  21.             if(num==numMin || num < numMin){  
  22.                 document.getElementById("num").value = numMax;  
  23.             }else{  
  24.                 document.getElementById("num").value--;  
  25.             }  
  26.         }  
  27.           
  28.         function check(){  
  29.             var num = document.getElementById("num");  
  30.             if (isNaN(num.value)){  
  31.                 alert("只能输入数字!");  
  32.                 num.value="";  
  33.             }  
  34.         }  
  35.         //--> 
  36.     </SCRIPT> 
  37.     <style type="text/css"> 
  38.         input{width:60px;height:30px;float:left;}  
  39.         .click{width:19px;height:32px;margin-left:1px;float:left;}  
  40.         #up{display:inline-block;width:19px;height:15px;background:url("up.png");}  
  41.         #down{display:inline-block;width:18px;height:15px;background:url("down.png");}  
  42.     </style> 
  43. </head> 
  44. <body> 
  45.     <div class="num"><input type="text" id="num" value="1" onkeyup="check();"></div> 
  46.     <div class="click"><span id="up" onclick="add();"></span><span id="down" onclick="minus();"></span></div> 
  47.     </body> 
  48. </html> 

这里需要两个按钮图片,在附近里面。

你可能感兴趣的:(数字微调)