数字微调

<div class="aaa"></div>
<div class="bbb"></div>

<script>
    $(function(){
        $(".aaa").numadjust({exg:false});
        $(".bbb").numadjust({exg:true,exgnum:{min:1,max:10}});
    })
</script>

　

(function (window, $, undefined) {
    var num=0;
    function btnClick(txtdom,dom,options,bool){
        //条件成立=超出范围
        num=bool===true?parseInt(txtdom.val())+1:parseInt(txtdom.val())-1;
        if (options.exg) {
            //有最大最小限制
            if (num>=options.exgnum.max) {
                bool===true?dom.addClass("noClick"):dom.siblings("span").addClass("noClick");
            }else{
                bool===true?dom.removeClass("noClick"):dom.siblings("span").removeClass("noClick");
            }
            if (num<=options.exgnum.min) {
                bool===true?dom.siblings("span").addClass("noClick"):dom.addClass("noClick");
            }else{
                bool===true?dom.siblings("span").removeClass("noClick"):dom.removeClass("noClick");
            }
            if (bool) {num=num>=options.exgnum.max?options.exgnum.max:num;
            }else{num=num<=options.exgnum.min?options.exgnum.min:num;}
        }else{}
        txtdom.val(num);
    }
    function btnoClick(dom){
        dom.children('span').addClass("noClick");
    }
    $.extend($.fn, {
        numadjust: function (option) {          
            var numadjustClass={
                exg:false,//默认没有最大最小值
                exgnum:{
                    min:0,
                    max:100
                },
            }
            if ($(this)[0] == null || $(this)[0] == undefined) { return; };
            //进行初始化
            var options=$.extend(numadjustClass,option||{});
            if (options.exgnum.max<options.exgnum.min) { return;};
            //是否有最大最小值
            //var flag=options.exg;
            var dom=$(this);
            //添加元素
            dom.find('.num').remove();
            dom.prepend("<div class='num'><span class='jadd'>+</span><input type='number' value='1' class='jtxt'/><span class='jcut'>-</span></div>")

            //定义方法
            var num=dom.find('.num');      
            var btnadd=num.children('.jadd');
            var btncut=num.children('.jcut');
            var txt=num.children('.jtxt');
            //定义方法
           try{
                //input调整
                var exgNumber=/^[1-9]d*|0$/;
                $(".jtxt").on("input",function(event) {
                    var txtNum=$(this).val();
                    if(txtNum == "" || txtNum == null ||txtNum ==undefined){$(this).val(1);}
                    else{
                        if (exgNumber.test(txtNum)){
                            if (options.exg) {
                                txtNum=txtNum>options.exgnum.max?options.exgnum.max:txtNum;
                                txtNum=txtNum<options.exgnum.min?options.exgnum.min:txtNum;
                            }
                            $(this).val(txtNum);
                        }else{
                            $(this).val(1);
                        }
                    }
                });
                //增加减少数字
                btnadd.click(function(){
                    btnClick(txt,$(this),options,true);
                })
               btncut.click(function(){
                    btnClick(txt,$(this),options,false);
                })
           }catch(e){}
        },
    })
})(window, Zepto);

　　

 /*初始化 | begin*/
html{font-size: 10px;line-height: 1em;}
body,ul{margin: 0;padding:0;font-size: 1em;}
ul,li{list-style: none;}
input{padding: 0;}
/*初始化 | end*/
.num{overflow: hidden;}
.num span,.num input{font-size:1.2em;float:left;display:block;3em;height:3em;text-align: center;line-height:3em;border: 1px solid #e8e8e8;border-radius: 4px;background: #fff;}
.num span{cursor:pointer;}
.num span:first-child{border-radius: 4px 0 0 4px;}
.num span:last-child{border-radius: 0 4px 4px 0;}
.num input{4em;border-radius: 0;border-left:0 none;border-right: 0 none;-webkit-appearance: none;}
span.noClick{background-color: #e8e8e8;color: #666;}