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 相关文章推荐
Jquery 的扩展方法总结
Oct 01 Javascript
JQuery拖拽元素改变大小尺寸实现代码
Dec 10 Javascript
jQuery移动和复制dom节点实用DOM操作案例
Dec 17 Javascript
jquery实现图片等比例缩放以及max-width在ie中不兼容解决
Mar 21 Javascript
纯js实现div内图片自适应大小(已测试,兼容火狐)
Jun 16 Javascript
jQuery中index()的用法分析
Sep 05 Javascript
微信小程序  自定义创建详细介绍
Oct 27 Javascript
javascript表达式和运算符详解
Feb 07 Javascript
详解使用webpack构建多页面应用
Dec 21 Javascript
vue.js中ref和$refs的使用及示例讲解
Aug 14 Javascript
js的新生代垃圾回收知识点总结
Aug 22 Javascript
JS原型对象操作实例分析
Jun 06 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
剧场版动画《PSYCHO-PASS 3 FIRST INSPECTOR》3月27日日本上映!
2020/03/06 日漫
国产动画《伍六七》原声大碟大卖,啊哈娱乐引领音乐赋能IP的新尝试
2020/03/08 国漫
PHP 开源框架22个简单简介
2009/08/24 PHP
linux系统上支持php的 iconv()函数的方法
2011/10/01 PHP
使用GD库生成带阴影文字的图片
2015/03/27 PHP
PHP SPL标准库中的常用函数介绍
2015/05/11 PHP
php文件操作之文件写入字符串、数组的方法分析
2019/04/15 PHP
JS连连看源码完美注释版(推荐)
2013/12/09 Javascript
基于jQuery实现的文字按钮表单特效整理
2014/12/07 Javascript
JavaScript中number转换成string介绍
2014/12/31 Javascript
介绍一个简单的JavaScript类框架
2015/06/24 Javascript
多功能jQuery树插件zTree实现权限列表简单实例
2016/07/12 Javascript
解析JavaScript实现DDoS攻击原理与保护措施
2016/12/26 Javascript
js实现日期显示的一些操作(实例讲解)
2017/07/27 Javascript
js中let和var定义变量的区别
2018/02/08 Javascript
Angular ng-animate和ng-cookies用法详解
2018/04/18 Javascript
react 父子组件之间通讯props
2018/09/08 Javascript
vue移动端城市三级联动组件使用详解
2019/07/26 Javascript
[57:37]EG vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python实现的简单FTP上传下载文件实例
2015/06/30 Python
简单谈谈Python中的闭包
2016/11/30 Python
python中import学习备忘笔记
2017/01/24 Python
把csv文件转化为数组及数组的切片方法
2018/07/04 Python
Python 保持登录状态进行接口测试的方法示例
2019/08/06 Python
PyTorch 对应点相乘、矩阵相乘实例
2019/12/27 Python
用OpenCV进行年龄和性别检测的实现示例
2021/01/29 Python
html5教程画矩形代码分享
2013/12/04 HTML / CSS
HTML5 Canvas 旋转风车绘制
2017/08/18 HTML / CSS
小橄榄树:Le Petit Olivier
2018/04/23 全球购物
领先的荷兰线上超市:荷兰之家Holland at Home(支持中文)
2021/01/21 全球购物
教师党的群众路线教育实践活动学习笔记
2014/11/05 职场文书
2015年计划生育责任书
2015/05/08 职场文书
Python基础详解之描述符
2021/04/28 Python
Redis主从配置和底层实现原理解析(实战记录)
2021/06/30 Redis
python 进阶学习之python装饰器小结
2021/09/04 Python
JavaScript实现两个数组的交集
2022/03/25 Javascript