日期:2014-05-16  浏览次数:20448 次

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>