`

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>

  • 大小: 6.7 KB
分享到:
评论

相关推荐

    jqueay实现商品数量加减

    在实现商品数量加减的功能时,jQuery的优势在于其简洁的API和强大的功能,可以帮助开发者快速编写出高效、易维护的代码。 首先,我们需要在HTML中设置一个结构,通常包括两个按钮(分别用于增加和减少数量)和一个...

    【ECSHOP插件】商品详情页、购物车页添加购买数量加减按钮

    这个插件的主题是“商品详情页、购物车页添加购买数量加减按钮”,它旨在优化用户在ECSHOP平台上的购物体验,使顾客能够更加便捷地调整选购商品的数量。 在商品详情页和购物车页增加购买数量的加减按钮,是一项对...

    ecshop商品页购买数量加减按钮

    本话题将深入探讨ECSHOP商品页上的购买数量加减按钮及其相关功能。 1. **ECSHOP系统概述**: ECSHOP是一款基于PHP语言和MySQL数据库开发的开源电子商务解决方案。它的主要特点是界面友好、操作简单,为商家提供了...

    jQuery仿淘宝天猫商品数量加减js代码

    在电商网站上,用户在选择商品时经常需要调整购买的数量,这种交互功能通常是通过JavaScript实现的,特别是使用jQuery库的情况。本示例是关于“jQuery仿淘宝天猫商品数量加减js代码”,它允许用户在购物车中增加或...

    购物车-购买时数量加减选择器

    在电商网站上,购物车是用户进行商品购买的核心部分,其中的数量加减选择器是用户调整选购商品数量的重要交互元素。这个"购物车-购买时数量加减选择器"的功能设计和实现涉及到前端开发、用户体验设计以及交互逻辑等...

    ecshop 购物车页添加购买数量加减按钮

    通过以上这些技术,"ecshop 购物车页添加购买数量加减按钮" 插件提升了ECSHOP平台的用户体验,使得商品管理更加直观和便捷。对于开发者来说,理解这些知识点并熟练运用到实际项目中,有助于构建出更高效、用户友好的...

    小程序demo--购物数量加减

    本项目"小程序demo--购物数量加减"是针对在线购物场景设计的一个功能模块,主要涉及用户在选择商品时调整购买数量的操作。下面将详细阐述这个小程序功能的关键知识点。 1. **小程序开发框架**: 小程序的开发通常...

    购物车数量加减联动

    在电商网站上,购物车是用户与商品交互的重要环节,其中购物车数量的加减联动功能是提升用户体验的关键。这个功能允许用户实时调整选中商品的数量,并同步更新总价,为用户提供直观、便捷的购物环境。下面我们将深入...

    jQuery购物车商品数量加减合计代码.zip

    在本案例中,我们关注的是一个使用jQuery实现的购物车商品数量加减及合计的代码实现,它提供了用户友好的交互体验。这个功能通常包括商品的增加、减少、删除以及总价的实时计算。下面我们将详细探讨这些关键知识点。...

    仿商品购买数量 按钮数字加减

    本话题将详细探讨“仿商品购买数量按钮数字加减”的实现原理和相关技术。 首先,我们来看“仿商品购买数量”这一概念。在网页设计中,为了模拟真实的购物体验,开发者会创建一个UI组件,它包含两个按钮:一个用于...

    购物车 加减功能实现

    1. 购物车表设计:通常会有一个用户购物车表,包含用户ID、商品ID、购买数量等字段,可能还有其他信息如商品规格等。 2. 存储过程:对于频繁的加减操作,可以使用存储过程来优化性能,一次性处理多个相关操作,如...

    jQuery仿购物商城商品数量加减代码.zip

    在网页开发中,购物商城的商品数量加减功能是一项常见的交互设计,它使用户能够轻松地调整购买商品的数量。本篇文章将详细解读“jQuery仿购物商城商品数量加减代码”这一主题,通过分析压缩包中的js、index.html和...

    电商购物数量加减

    通过对上述代码的详细解析,我们可以清楚地看到电商购物数量加减功能是如何通过JavaScript(特别是jQuery)实现的。这种实现方式不仅简单易懂,还具有良好的用户体验。开发者可以根据实际需求进一步优化和完善这一...

    jQuery仿购物商城商品数量加减代码

    通过这样的方式,我们可以创建一个用户友好的购物体验,让顾客更便捷地调整购买数量。 总的来说,这个项目主要涉及了jQuery的选择器、事件处理、DOM操作以及简单的数据验证。掌握这些基本技能,可以帮助开发者构建...

    jQuery购物车商品数量加减计算代码

    要实现商品数量的加减计算,我们需要以下几个关键步骤: 1. **HTML结构**:在页面上创建一个结构,包括商品名称、单价、数量输入框(或加减按钮)以及总价显示区域。数量输入框通常是一个`&lt;input type="number"&gt;`...

    实用商品购买jQuery数字加减插件jquery.spinner

    实用jQuery数字加减插件jquery.spinner,基于jQuery插件实现,直接模拟美化input框, 经常用于商品购买的时候加减数量,或者是在购物车页面,非常大气,值得学习和使用的 JS特效。

    jquery.spinner一款jquery数字智能加减插件

    《jQuery Spinner:构建数字智能加减插件的深入解析》 在Web开发中,用户界面的交互性至关重要,而数字输入框(Spinner)是提升用户体验的一种常见方式。它允许用户通过点击按钮或直接输入数值来增加或减少数字,...

    jquery文本框数量加减

    本教程将详细讲解如何使用 jQuery 实现文本框中的数量加减功能,这一功能常用于电商网站的商品购买数量调整等场景。 一、jQuery 基础 在开始之前,确保已经在项目中引入了 jQuery 库。可以通过以下方式在 HTML ...

    购物车数量加减,并统计选中数量和选中总价

    本文将详细讨论如何实现“购物车数量加减”以及如何统计选中商品的数量和总价,这些都是购物车功能的核心组成部分。 首先,我们关注“数量加减”这个知识点。在购物车列表中,每个商品项通常会有一个数量输入框,...

    基于JavaScript的产品购物车数量加减+-(调试通过)

    在电子商务网站购物时,选择了一个商品后,一般购物车都有一个可以调整购买数量的位置,形如“- 1+”,点击加号,增加购买数量,点击减号,减少购买数量或清空购物车。通过JavaScript原生代码,可以很简单地实现此...

Global site tag (gtag.js) - Google Analytics