jQuery实现数字加减效果汇总

2024-04-23 18:36:19

我们在网上购物提交订单时，在网页上一般会有一个选择数量的控件，要求买家选择购买商品的件数，开发者会把该控件做成可以通过点击实现加减等微调操作，当然也可以直接输入数字件数。

左右加减数字

像京东提交订单时目前使用的是左右加减数字的效果，这个效果直接明了，操作简单。我们使用jquery.spinner.js插件实现左右加减数字，调用方法非常简单。

代码如下:

调用也非常简单，先载入jquery库文件和jquery.spinner.js，然后使用以下代码：

代码如下:

$('.spinner').spinner();

Bootstrap风格，右侧加减

Bootstrap火了很久了，基于bootstrap风格的各类应用也非常多，下面给大家介绍一个基于bootstrap的数字加减插件，可以设置最小值、最大值、递增递减（步长值），可手动输入数字。

代码如下:

将bootstrap相关css和js文件载入后，便可直接看到页面效果，如果你的项目基于bootstrap，那么直接就可以调用它了。

您还可以参考该项目地址：https://github.com/xixilive/jquery-spinner查看相关参数设置。

jQuery ui风格，右侧加减

jQuery ui也提供了数字加减插件，可以设置最小值、最大值、递增递减（步长值），可手动输入数字。

代码如下:

如果你的项目使用了jquery ui，那就可以调用jquery ui来实现数字加减的功能了。

代码如下:

$("#spinner").spinner({
    max:10,
    min:0,
    step:2
});

以上几种就是本人在项目中使用的关于jQuery实现数字加减的方法，整理出来分享给大家用，虽然功能比较简单，但是很实用。

jQuery实现购物车多物品数量的加减+总价计算

复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQuery实现购物
jQuery实现的购物车物品数量加减功能代码

本文实例讲述了jQuery实现的购物车物品数量加减功能.分享给大家供大家参考,具体如下: 今天网友翠儿在用Jquery实现购物车物品数量的加减特效的时候遇到问题来问我,我后来帮她解决了这个Jquery特效,现在把它整理出来分享给大家用,虽然功能比较简单,但是很实用. 主要包括了以下功能: 1.数量增加操作功能 2.数量减少操作功能 3.总价计算功能 4.自动判断数量到1的时候,减少操作按钮禁止点击,数量增加时自动恢复 5.保留小数点位数toFixed()函数非常实用功能代码如下: $(func
jQuery快速实现商品数量加减的方法

废话不多说了,直接给大家贴代码了,具体代码如下所示:  <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> <script> $(docu
jQuery实现购物车数字加减效果

我们在网上购物提交订单时,在网页上一般会有一个选择数量的控件,要求买家选择购买商品的件数,开发者会把该控件做成可以通过点击实现加减等微调操作,当然也可以直接输入数字件数.本文将介绍常见的几种使用spinner数字微调器来实现数字加减的功能的方法. 左右加减数字像京东提交订单时目前使用的是左右加减数字的效果,这个效果直接明了,操作简单.我们使用jquery.spinner.js插件实现左右加减数字,调用方法非常简单,请看演示示例1. 复制代码代码如下: <input type="text
jquery实现文本框数量加减功能的例子分享

下面是使用jquery实现的代码. 效果图: 源码: 复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>
jQuery实现数字加减效果汇总

我们在网上购物提交订单时,在网页上一般会有一个选择数量的控件,要求买家选择购买商品的件数,开发者会把该控件做成可以通过点击实现加减等微调操作,当然也可以直接输入数字件数. 左右加减数字像京东提交订单时目前使用的是左右加减数字的效果,这个效果直接明了,操作简单.我们使用jquery.spinner.js插件实现左右加减数字,调用方法非常简单. 复制代码代码如下: <input type="text" class="spinner"/> 调用也非常简单,
jquery实现页面加载效果

1.说明 Jquery页面加载可实现异步请求时提示"请稍后,正在加载..."效果,同步请求不可用(即ajax async: false). 2.代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="h
js实现仿购物车加减效果

效果图: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } body{ overflow-y: auto; } ul{ margin-top: 20px; border-top: 1px solid #666; } h1{ widt
Android自定义商品购买数量加减控件

在购买商品时,大家可以自定义数字加减控件,来确定购买商品的实际数量,如何实现此控件,请参考下文: 1.自定义数字加减控件的要求创建Module -NumberAddSubView A_输入的只能是数字,而且不能通过键盘输入 B_通过加减按钮操作数字 C_监听加减按钮 D_数组有最小值和最大值的限制 E_自定义属性 2.提供接口,让外界监听到数字的变化 1_设置接口 @Override public void onClick(View v) { if (v.getId() == R.id.btn
详解JavaScript中任意两数加减的解决方案

目录写在前面分析填坑思路解决整数加减的坑转换科学计算解决整数减法的坑解决小数加法的坑解决小数减法的坑解决整数加小数的通用问题总结写在前面本文是从初步解决到最终解决的思路,文章篇幅较长虽然是一篇从0开始的文章,中间的思维跳跃可能比较大代码的解析都在文章的思路分析和注释里,全文会帮助理解的几个关键词 1.Number.MAX_SAFE_INTEGER 和 Number.MIN_SAFE_INTEGER 2.15长度的字符串 3.padStart 和 padEnd 分析填坑思
jQuery实现数字自动增加或者减少的动画效果示例

本文实例讲述了jQuery实现数字自动增加或者减少的动画效果.分享给大家供大家参考,具体如下: 效果图: 1.HTML: <div class="up"></div> <br> <div class="down"></div> 2.JS: $(function(){ var obj={ el:$(".up"), max:1000, start:100//增加开始的初始值 } var ob
jQuery实现图片预加载效果

本文实例讲述了jQuery实现图片预加载效果代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: html代码: <div class="main"> <br> <div class="title">图片预加载</div> <div class="content"> <div class="img"> <a href="
jQuery实现的瀑布流加载效果示例

本文实例讲述了jQuery实现的瀑布流加载效果.分享给大家供大家参考,具体如下: demo.js: $(function(){ $('img').load(function(){ var box = $('.box'); var boxHeight = { leftBox:[], centerBox:[], rightBox:[] } for(var i=0;i<box.length;i++){ var now = i%3; //now的值为0,1,2 switch(now){ case 0:

jQuery实现数字加减效果汇总

相关推荐

随机推荐