JS实现商品购买数量加减

1、效果图:

附件中

2、JS验证方法:

    var min=1; 
     function reg(x) { 
        jQuery('#J_Tip').html(""); 
        jQuery('#J_Tip').hide(); 
        return new RegExp("^[1-9]\\d*$").test(x); 
    }
    function amount(obj, mode) { 
        var x = jQuery(obj).val(); 
        if (this.reg(parseInt(x))) { 
            if (mode) { 
                x++; 
            } else { 
                x--; 
            } 
        } else { 
            jQuery('#J_Tip').html("<i class=\"ico\"></i>请输入正确的数量!"); 
            jQuery('#J_Tip').show(); 
            jQuery(obj).val(1); 
            jQuery(obj).focus(); 
        } 
        return x; 
    }
    function reduce(obj) { 
        var x = this.amount(obj, false); 
        if (parseInt(x) >= this.min) { 
            jQuery(obj).val(x); 
        } else { 
            jQuery('#J_Tip').html("<i class=\"ico\"></i>商品数量最少为" + this.min 
                    + "!"); 
            jQuery('#J_Tip').show(); 
            jQuery(obj).val(1); 
            jQuery(obj).focus(); 
        } 
    }
    function add(obj) { 
        var x = this.amount(obj, true); 
        var max = jQuery('#nAmount').val(); 
        if (parseInt(x) <= parseInt(max)) { 
            jQuery(obj).val(x); 
        } else { 
            jQuery('#J_Tip').html("<i class=\"ico\"></i>您所填写的商品数量超过库存!"); 
            jQuery('#J_Tip').show(); 
            jQuery(obj).val(max == 0 ? 1 : max); 
            jQuery(obj).focus(); 
        } 
    }
    function modify(obj) { 
        var x = jQuery(obj).val(); 
        var max = jQuery('#nAmount').val(); 
        if (!this.reg(parseInt(x))) { 
            jQuery(obj).val(1); 
            jQuery(obj).focus(); 
            jQuery('#J_Tip').html("<i class=\"ico\"></i>请输入正确的数量!"); 
            jQuery('#J_Tip').show(); 
            return; 
        } 
        var intx = parseInt(x); 
        var intmax = parseInt(max); 
        if (intx < this.min) { 
            jQuery('#J_Tip').html("<i class=\"ico\"></i>商品数量最少为" + this.min 
                    + "!"); 
            jQuery('#J_Tip').show(); 
            jQuery(obj).val(this.min); 
            jQuery(obj).focus(); 
        } else if (intx > intmax) { 
            jQuery('#J_Tip').html("<i class=\"ico\"></i>您所填写的商品数量超过库存!"); 
            jQuery('#J_Tip').show(); 
            jQuery(obj).val(max == 0 ? 1 : max); 
            jQuery(obj).focus(); 
        } 
    }

3、html代码:

              <dt>
              <span class="li_hd">购买数量:</span>
              </dt>
              <dd>
                <a class="num_oper num_min" href="javascript:reduce('#J_Amount');">-</a> 
                <input name="J_Amount" id="J_Amount" class="input_txt" type="text" maxlength="6" value="1" size="3" onkeyup="modify('#J_Amount');"/> 
                <a class="num_oper num_plus" href="javascript:add('#J_Amount')">+</a> 
                <p class="caution_tips" id="J_Tip" style="display:none;"></p> 
                <input id="nAmount" type="hidden" value="1000"/>             
              </dd>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值