商城购买数量选择

来源：互联网发布：c语言a<<1 编辑：程序博客网时间：2024/04/28 17:48

1.做个商城数量选择小工具

要求的规则：

1）.输入范围限定在1-200.

2）.超过200则，则进行提示

3.）非法字符禁止输入

4.）一般在客户端验证后，服务器端还是需要重新验证的。

2.HTML

<div class="shoes-cnt"><div class="shoes-cnt-notice">数量</div><div class="shoes-cnt-minus shoes-cnt-minus-blur">-</div><div class="shoes-cnt-area"><input type="text" class="shoes-cnt-input" value="1"/></div><div class="shoes-cnt-plus">+</div><div class="shoes-cnt-max">（限购200件）</div></div>

3.CSS

body,input{margin:0;padding:0;}/*鞋子的数量----------------------------------------------------*/.shoes-cnt{margin-top:10px;width:100%;display:flex;display:-webkit-flex;height:25px;}.shoes-cnt-notice{line-height:25px;width:50px;text-align:center;}.shoes-cnt-minus{width:25px;height:25px;box-sizing:border-box;border:1px solid grey;text-align:center;line-height:23px;font-size:18px;}.shoes-cnt-minus-blur{color:#b1b1b1;}.shoes-cnt-area{width:35px;height:25px;border-top:1px solid grey;border-bottom:1px solid grey;box-sizing:border-box;}.shoes-cnt-input{width:100%;height:100%;border:none;outline:none;text-align:center;}.shoes-cnt-plus{width:25px;height:25px;box-sizing:border-box;border:1px solid grey;text-align:center;text-align:center;line-height:23px;font-size:18px;}.shoes-cnt-plus-blur{color:#b1b1b1;}.shoes-cnt-max{flex:1;line-height:25px;font-size:12px;display:none;color:#f23030;}

4.JS

/*鞋子数量输入选择-------------------------------1.鞋子数量最大上限需要与后端共同验证*///单次可以购买鞋的最大数量var cnt_max=200;$(".shoes-cnt-minus").click(function(){var input_value=$(".shoes-cnt-input").val();$(".shoes-cnt-input").val(--input_value);validateCnt();});$(".shoes-cnt-plus").click(function(){var input_value=$(".shoes-cnt-input").val();$(".shoes-cnt-input").val(++input_value);validateCnt();});$(".shoes-cnt-input").blur(function(){validateCnt();});$(".shoes-cnt-input").keyup(function(){var input_value=$(".shoes-cnt-input").val();if(input_value.length>2){validateCnt();}});/*数字验证*/function validateCnt(){var input_value=$(".shoes-cnt-input").val();$(".shoes-cnt-max").hide();if(isNaN(input_value)){$(".shoes-cnt-input").val(1);$(".shoes-cnt-minus").addClass("shoes-cnt-minus-blur");}else{if(input_value>=cnt_max){$(".shoes-cnt-input").val(cnt_max);$(".shoes-cnt-max").show();$(".shoes-cnt-minus").removeClass("shoes-cnt-minus-blur");$(".shoes-cnt-plus").addClass("shoes-cnt-plus-blur");}if(input_value<=1){$(".shoes-cnt-input").val(1);$(".shoes-cnt-minus").addClass("shoes-cnt-minus-blur");}if(input_value>1&&input_value<cnt_max){$(".shoes-cnt-minus").removeClass("shoes-cnt-minus-blur");$(".shoes-cnt-plus").removeClass("shoes-cnt-plus-blur");}}}

0 0