当前位置:首页 > 开发 > Web前端 > JavaScript > 正文

JS实现商品购买数量加减

发表于: 2013-12-18   作者:cngolon   来源:转载   浏览次数:
js
摘要: 1、效果图: 附件中 2、JS验证方法:     var min=1;       function reg(x) {          jQuery('#J_Tip').html("");  &nbs

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>

JS实现商品购买数量加减

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
可以直接复制此代码到http://www.w3cschool.cc/try/try.php?filename=tryjquery_hide这里替换掉原代
今天简单的实现了一下ecshop商品导出到第三方的购买链接功能。 大致思路是给商品添加一个buy_link的
一、需求描述 电商网站的商品发布功能,类似京东的商品详细页,如下图,这样的可选择功能,在后台是
是否希望顾客一个订单购买某个商品不要超过一定数量?那这个插件就适合您了。 1. 可以在编辑商品时
本文发表于计算机期刊《物流技术》2002年第4期。 物流配送中商品订货数量的控制技术 马根峰,王平 (
问题描述: 我想让商品列表页(category.php)的每个商品的下面显示该商品的评论数量以及评论等级,
欢迎来到设置商品列表显示数量,zencart后台设置,zencart教程 Zen Cart的产品列表页面中每行的列的缺
数据可视化 是很多大数据分析的一项重要工作,甚至有专门的团队做这项工作。Web上的各种图形(饼状
数据可视化 是很多大数据分析的一项重要工作,甚至有专门的团队做这项工作。Web上的各种图形(饼状
数据可视化 是很多大数据分析的一项重要工作,甚至有专门的团队做这项工作。Web上的各种图形(饼状
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号