jQuery实现数字加减效果汇总


Posted in Javascript onDecember 16, 2014

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

左右加减数字

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

<input type="text" class="spinner"/>

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

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

Bootstrap风格,右侧加减

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

<div class="input-group spinner" data-trigger="spinner" id="spinner"> 

    <input type="text" class="form-control" value="1" data-max="10" data-min="1" data-step="1"> 

    <div class="input-group-addon"> 

        <a href="javascript:;" class="spin-up" data-spin="up"><i class="icon-sort-up"></i></a> 

        <a href="javascript:;" class="spin-down" data-spin="down"><i class="icon-sort-down"></i></a> 

    </div> 

</div>

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

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

jQuery ui风格,右侧加减

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

<input type="text" id="spinner"/>

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

$("#spinner").spinner({ 

    max:10, 

    min:0, 

    step:2 

});

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

Javascript 相关文章推荐
javascript options属性集合操作代码
Dec 28 Javascript
页面定时刷新(1秒刷新一次)
Nov 22 Javascript
JavaScript bold方法入门实例(把指定文字显示为粗体)
Oct 17 Javascript
jQuery实现企业网站横幅焦点图切换功能实例
Apr 30 Javascript
js中不同的height, top的区别对比
Sep 24 Javascript
JavaScript知识点总结(四)之逻辑OR运算符详解
May 31 Javascript
详解JavaScript常量定义
Jan 03 Javascript
node.js的事件机制
Feb 08 Javascript
浅析webpack 如何优雅的使用tree-shaking(摇树优化)
Aug 16 Javascript
浅谈Webpack打包优化技巧
Jun 12 Javascript
详解JavaScript的数据类型以及数据类型的转换
Apr 20 Javascript
ES6 Proxy实现Vue的变化检测问题
Jun 11 Javascript
javascript使用switch case实现动态改变超级链接文字及地址
Dec 16 #Javascript
浅谈Javascript变量作用域问题
Dec 16 #Javascript
IE6/IE7中JavaScript json提示缺少标识符、字符串或数字问题处理
Dec 16 #Javascript
javascript arguments使用示例
Dec 16 #Javascript
javascript实现日期格式转换
Dec 16 #Javascript
javascript实现禁止复制网页内容
Dec 16 #Javascript
node.js中的fs.rmdirSync方法使用说明
Dec 16 #Javascript
You might like
第七节 类的静态成员 [7]
2006/10/09 PHP
php 魔术方法详解
2014/11/11 PHP
PHP使用NuSOAP调用Web服务的方法
2015/07/18 PHP
PHP识别二维码的方法(php-zbarcode安装与使用)
2016/07/07 PHP
JS URL传中文参数引发的乱码问题
2009/09/02 Javascript
js中点击空白区域时文本框与隐藏层的显示与影藏问题
2013/08/26 Javascript
Javascript解析URL方法详解
2014/12/05 Javascript
Jquery实现动态切换图片的方法
2015/05/18 Javascript
Javascript 基础---Ajax入门必看
2016/07/06 Javascript
深入浅析javascript中的作用域(推荐)
2016/07/19 Javascript
JS批量替换内容中关键词为超链接
2017/02/20 Javascript
JavaScript中三个等号和两个等号你了解多少
2017/07/04 Javascript
Bootstrap弹出框之自定义悬停框标题、内容和样式示例代码
2017/07/11 Javascript
javaScript canvas实现(画笔大小 颜色 橡皮的实例)
2017/11/28 Javascript
从源码里了解vue中的nextTick的使用
2018/11/22 Javascript
微信小程序使用canvas的画图操作示例
2019/01/18 Javascript
js实现适配移动端的拖动效果
2020/01/13 Javascript
vue使用better-scroll实现滑动以及左右联动
2020/06/30 Javascript
Vue实现简单的留言板
2020/10/23 Javascript
对python opencv 添加文字 cv2.putText 的各参数介绍
2018/12/05 Python
Python查找数组中数值和下标相等的元素示例【二分查找】
2019/02/13 Python
python使用pandas处理大数据节省内存技巧(推荐)
2019/05/05 Python
利用Python复制文件的9种方法总结
2019/09/02 Python
python实现的接收邮件功能示例【基于网易POP3服务器】
2019/09/11 Python
python interpolate插值实例
2020/07/06 Python
Python logging模块handlers用法详解
2020/08/14 Python
HTML5中微数据概述及在搜索引擎中的使用举例
2013/02/07 HTML / CSS
英国领先的在线旅游和休闲零售商:lastminute.com
2019/01/23 全球购物
酒店工作职员求职简历的自我评价
2013/10/23 职场文书
数控技术应届生求职信
2013/11/13 职场文书
大学生求职自荐信
2013/12/12 职场文书
高一自我鉴定
2013/12/17 职场文书
七一表彰活动方案
2014/01/18 职场文书
销售员未完成销售业绩的检讨书
2014/10/12 职场文书
出国留学英文自荐信
2015/03/25 职场文书
python 实现的截屏工具
2021/05/08 Python