使用jQuery实现input数值增量和减量的方法


Posted in Javascript onJanuary 24, 2015

本文实例讲述了使用jQuery实现input数值增量和减量的方法。分享给大家供大家参考。具体分析如下:

在很多电商网站中,在购物车所在页面,涉及到商品数量的时候,都会提供一个+号按钮和-号按钮来实现增1和减1,并且只允许input中输入数值。Bootstrap TouchSpin这款插件就是针对此需求而写。(Bootstrap TouchSpin这款插件点击此处本站下载。)

首先引入必要的css和js文件。

<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />

<link href="css/jquery.bootstrap-touchspin.min.css" rel="stylesheet" />

<script src="Scripts/jquery-2.1.3.min.js"></script>

<script src="bootstrap/js/bootstrap.min.js"></script>

<script src="Scripts/jquery.bootstrap-touchspin.min.js"></script>

一、控制数值的精度和自增自减量  

<br />

<div style="margin-left: 10px;">

        <form class="form-horizontal" role="form">

            <div class="form-group">

                <div class="col-xs-2">

                    <input id="demo1" type="text" value="55" name="demo1" class="form-control" />

                </div>

            </div>

        </form>

</div>

<script type="text/javascript">

        $(function () {

            $("input[name='demo1']").TouchSpin({

                min: 0,

                max: 100,

                step: 0.1,//增量或减量

                decimals: 2, //精度

                boostat: 5,

                maxboostedstep: 10,

                postfix: '%' //后缀

            });

        });

</script>

使用jQuery实现input数值增量和减量的方法

● 点击+号按钮自增0.1
● 点击-号按钮自减0.1
● 保留2位小数点
● 允许的最小数值0.00
● 允许的最大数值100.00
● 只允许输入数值,否则失去焦点显示最小值0.00

二、只允许从1开始的整数,这也是购物车页面常用的做法

<div style="margin-left: 10px;">

        <form class="form-horizontal" role="form">

            <div class="form-group">

                <div class="col-xs-2">

                    <input id="demo2" type="text" value="1" name="demo2" class="form-control" />

                </div>

            </div>

        </form>

</div>

<script type="text/javascript">

        $(function () {

            $("input[name='demo2']").TouchSpin({

                min: 1,

                max: 100,

                step: 1//增量或减量

            });

        });

</script>

使用jQuery实现input数值增量和减量的方法

● 点击+号按钮自增1
● 点击-号按钮自减1
● 允许的最小数值1
● 允许的最大数值100
● 只允许输入数值,否则失去焦点显示最小值1

至于其它用法,感兴趣的朋友可参考相关文档。

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
jQuery 动态酷效果实现总结
Dec 27 Javascript
javascript实现面向对象类的功能书写技巧
Mar 07 Javascript
JavaScript中的立即执行函数表达式介绍
Mar 15 Javascript
手机端点击图片放大特效PhotoSwipe.js插件实现
Aug 24 Javascript
React如何将组件渲染到指定DOM节点详解
Sep 08 Javascript
jquery写出PC端轮播图实例
Jan 26 jQuery
微信小程序实现点赞、取消点赞功能
Nov 02 Javascript
JS实现的碰撞检测与周期移动完整示例
Sep 02 Javascript
element-ui table组件如何使用render属性的实现
Nov 04 Javascript
深入浅析golang zap 日志库使用(含文件切割、分级别存储和全局使用等)
Feb 19 Javascript
VueJS实现用户管理系统
May 29 Javascript
JS实现刷新网页后之前浏览位置保持不变示例详解
Aug 14 Javascript
Javascript 拖拽雏形中的一些问题(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 #Javascript
Javascript 拖拽雏形(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 #Javascript
Javascript 拖拽的一些简单的应用(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 #Javascript
Javascript 完美运动框架(逐行分析代码,让你轻松了运动的原理)
Jan 23 #Javascript
Javascript 拖拽的一些高级的应用(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 #Javascript
jQuery选择器querySelector的使用指南
Jan 23 #Javascript
jQuery中DOM操作实例分析
Jan 23 #Javascript
You might like
收集的php编写大型网站问题集
2007/03/06 PHP
ThinkPHP中的常用查询语言汇总
2014/08/22 PHP
ThinkPHP写数组插入与获取最新插入数据ID实例
2014/11/03 PHP
thinkphp中多表查询中防止数据重复的sql语句(必看)
2016/09/22 PHP
thinkphp3.2实现在线留言提交验证码功能
2017/07/19 PHP
PHP mkdir创建文件夹实现方法解析
2020/11/13 PHP
初学prototype,发个JS接受URL参数的代码
2006/09/25 Javascript
解决使用attachEvent函数时,this指向被绑定的元素的问题的方法
2007/08/13 Javascript
Javascript 更新 JavaScript 数组的 uniq 方法
2008/01/23 Javascript
js调用activeX获取u盘序列号的代码
2011/11/21 Javascript
javascript 实现map集合
2015/04/03 Javascript
jQuery EasyUI 布局之动态添加tabs标签页
2015/11/18 Javascript
Bootstrap安装环境配置教程分享
2016/05/27 Javascript
浅析ES6的八进制与二进制整数字面量
2016/08/30 Javascript
javascript中递归的两种写法
2017/01/17 Javascript
创建一般js对象的几种方式
2017/01/19 Javascript
vue-router的HTML5 History 模式设置
2018/09/08 Javascript
js使用swiper实现层叠轮播效果实例代码
2018/12/12 Javascript
一些手写JavaScript常用的函数汇总
2019/04/16 Javascript
[01:00:54]TI4正赛第二日开场
2014/07/20 DOTA
Python提示[Errno 32]Broken pipe导致线程crash错误解决方法
2014/11/19 Python
Python中处理字符串的相关的len()方法的使用简介
2015/05/19 Python
学习python之编写简单简单连接数据库并执行查询操作
2016/02/27 Python
解决pyqt中ui编译成窗体.py中文乱码的问题
2016/12/23 Python
python去除字符串中的换行符
2017/10/11 Python
Python拼接字符串的7种方法总结
2018/11/01 Python
Python高级编程之继承问题详解(super与mro)
2019/11/19 Python
python中random.randint和random.randrange的区别详解
2020/09/20 Python
Vs Code中8个好用的python 扩展插件
2020/10/12 Python
python excel和yaml文件的读取封装
2021/01/12 Python
介绍一下JNDI的基本概念
2013/07/26 面试题
2014国庆节商场促销活动策划方案
2014/09/16 职场文书
副总经理党的群众路线教育实践活动个人对照检查材料思想汇报
2014/10/06 职场文书
2015年营销工作总结范文
2015/04/23 职场文书
学校团代会开幕词
2016/03/04 职场文书
Nginx同一个域名配置多个项目的实现方法
2021/03/31 Servers