公众号小程序制作公司_jquery完成数字输入框

jquery实现数字输入框       本文主要分享了jquery实现数字输入框的示例代码，具有很好的参考价值，下面跟着小编一起来看下吧

效果如下：

代码如下：

 !DOCTYPE html 
 html 
 head 
 meta charset="UTF-8" 
 title /title 
 script type="text/javascript" charset="utf-8" src="///jquery/3.1.1/jquery.min.js" 
 /script 
 /head 
 style 
 #reduce,#add{
 width: 50px;
 height: 50px;
 text-align: center;
 line-height: 50px;
 border: 1px solid #000000;
 font-size: 28px;
 font-weight: bold;
 float: left;
 cursor: pointer;
 #numVal{
 width: 100px;
 height: 46px;
 text-align: center;
 line-height: 46px;
 float: left;
 /style 
 body 
 div 
 div id="reduce" - /div 
 input id="numVal" / 
 div id="add" + /div 
 /div 
 /body 
 script type="text/javascript" 
 $(function(){
 var setInitVal=20;//设定初始值
 var setMax=30;//设定最大值
 var setInterval=2;//设定间隔
 $("#numVal")[0].value = setInitVal;
 $("#reduce").click(function() {
 $("#numVal")[0].value=Number($("#numVal")[0].value)-setInterval;
 if($("#numVal")[0].value 0) {
 $("#numVal")[0].value = 0;
 if($("#numVal")[0].value setMax) {
 $("#numVal")[0].value = setMax;
 $("#add").click(function() {
 $("#numVal")[0].value=Number($("#numVal")[0].value)+setInterval;
 if($("#numVal")[0].value setMax) {
 $("#numVal")[0].value = setMax;
 if($("#numVal")[0].value 0) {
 $("#numVal")[0].value = 0;
 $("#numVal").on("blur", function() {
 if($("#numVal")[0].value setMax) {
 $("#numVal")[0].value = setMax;
 if($("#numVal")[0].value 0) {
 $("#numVal")[0].value = Math.abs($("#numVal")[0].value)
 $("#numVal")[0].value = Number($("#numVal")[0].value)
 if(($("#numVal")[0].value) == "NaN") {
 $("#numVal")[0].value = 1;
 /script 
 /html 

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持凡科！