jQuery实现数字加减效果汇总
投稿：hebedich
字体：[ ] 类型：转载 时间：
本文将介绍常见的几种使用spinner数字微调器来实现数字加减的功能的方法。非常的简单实用，这里推荐给大家
我们在网上购物提交订单时，在网页上一般会有一个选择数量的控件，要求买家选择购买商品的件数，开发者会把该控件做成可以通过点击实现加减等微调操作，当然也可以直接输入数字件数。
左右加减数字
像京东提交订单时目前使用的是左右加减数字的效果，这个效果直接明了，操作简单。我们使用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&
将bootstrap相关css和js文件载入后，便可直接看到页面效果，如果你的项目基于bootstrap，那么直接就可以调用它了。
您还可以参考该项目地址：查看相关参数设置。
jQuery ui风格，右侧加减
jQuery ui也提供了数字加减插件，可以设置最小值、最大值、递增递减（步长值），可手动输入数字。
&input type="text" id="spinner"/&
如果你的项目使用了jquery ui，那就可以调用jquery ui来实现数字加减的功能了。
$("#spinner").spinner({
&&& max:10,
&&& min:0,
&&& step:2
以上几种就是本人在项目中使用的关于jQuery实现数字加减的方法，整理出来分享给大家用，虽然功能比较简单，但是很实用。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具欢迎您来到网页代码站！
如果您关闭了浏览器的javascript，可能导致页面部分功能无法显示，请开启javascript以便正常浏览本网页。网页代码站()谢谢您的支持！
您的当前位置： >>
>> jQuery实现点击“+”“-”加减号改变文本框数值
jQuery实现点击“+”“-”加减号改变文本框数值
分类：&&&时间：&&&点击：&&&关键词：|||||
&!doctype html&
&meta charset=&utf-8&/&
&title&jQuery实现点击“+”“-”加减号改变文本框数值_网页代码站()&/title&
&script src=&/themes/script/jquery.js&&&/script&
/*demo css*/
.i_tips{height:30margin-left:20color:#f60;font-size:14line-height:30px}
.i_box{margin:10px 20font-size:14float:left}
.i_box *{vertical-align:middle}
.i_box a{padding:2px 5background-color:#e9e9e9;border:1px solid #text-decoration:color:#585858;line-height:20px}
.i_box a:hover{color:#000}
.i_box input{width:30height:18margin:0 8padding:2border:1px solid #text-align:line-height:16px}
&!--DEMO start--&
&div id=&demo&&
&div class=&i_tips&&&/div&
&div class=&i_box&&&a href=&javascript:;& class=&J_minus&&-&/a&&input type=&text& value=&0& class=&J_input& /&&a href=&javascript:;& class=&J_add&&+&/a&&/div&
&div class=&i_box&&&a href=&javascript:;& class=&J_minus&&-&/a&&input type=&text& value=&0& class=&J_input& /&&a href=&javascript:;& class=&J_add&&+&/a&&/div&
&div class=&i_box&&&a href=&javascript:;& class=&J_minus&&-&/a&&input type=&text& value=&0& class=&J_input& /&&a href=&javascript:;& class=&J_add&&+&/a&&/div&
&div class=&i_box&&&a href=&javascript:;& class=&J_minus&&-&/a&&input type=&text& value=&0& class=&J_input& /&&a href=&javascript:;& class=&J_add&&+&/a&&/div&
&div class=&i_box&&&a href=&javascript:;& class=&J_minus&&-&/a&&input type=&text& value=&0& class=&J_input& /&&a href=&javascript:;& class=&J_add&&+&/a&&/div&
$.fn.iVaryVal=function(iSet,CallBack){
* Minus:点击元素--减小
* Add:点击元素--增加
* Input:表单元素
* Min:表单的最小值，非负整数
* Max:表单的最大值，正整数
iSet=$.extend({Minus:$('.J_minus'),Add:$('.J_add'),Input:$('.J_input'),Min:0,Max:20},iSet);
var C=null,O=
//插件返回值
var $CB={};
iSet.Add.each(function(i){
$(this).click(function(){
O=parseInt(iSet.Input.eq(i).val());
(O+1&=iSet.Max) || (iSet.Max==null) ? iSet.Input.eq(i).val(O+1) : iSet.Input.eq(i).val(iSet.Max);
//输出当前改变后的值
$CB.val=iSet.Input.eq(i).val();
$CB.index=i;
//回调函数
if (typeof CallBack == 'function') {
CallBack($CB.val,$CB.index);
iSet.Minus.each(function(i){
$(this).click(function(){
O=parseInt(iSet.Input.eq(i).val());
O-1&iSet.Min ? iSet.Input.eq(i).val(iSet.Min) : iSet.Input.eq(i).val(O-1);
$CB.val=iSet.Input.eq(i).val();
$CB.index=i;
//回调函数
if (typeof CallBack == 'function') {
CallBack($CB.val,$CB.index);
iSet.Input.bind({
'click':function(){
O=parseInt($(this).val());
$(this).select();
'keyup':function(e){
if($(this).val()!=''){
C=parseInt($(this).val());
//非负整数判断
if(/^[1-9]\d*|0$/.test(C)){
$(this).val(C);
$(this).val(O);
//键盘控制：上右--加，下左--减
if(e.keyCode==38 || e.keyCode==39){
iSet.Add.eq(iSet.Input.index(this)).click();
if(e.keyCode==37 || e.keyCode==40){
iSet.Minus.eq(iSet.Input.index(this)).click();
//输出当前改变后的值
$CB.val=$(this).val();
$CB.index=iSet.Input.index(this);
//回调函数
if (typeof CallBack == 'function') {
CallBack($CB.val,$CB.index);
'blur':function(){
$(this).trigger('keyup');
if($(this).val()==''){
$(this).val(O);
//判断输入值是否超出最大最小值
if(iSet.Max){
if(O&iSet.Max){
$(this).val(iSet.Max);
if(O&iSet.Min){
$(this).val(iSet.Min);
//输出当前改变后的值
$CB.val=$(this).val();
$CB.index=iSet.Input.index(this);
//回调函数
if (typeof CallBack == 'function') {
CallBack($CB.val,$CB.index);
$( function() {
$('.i_box').iVaryVal({},function(value,index){
$('.i_tips').html('你点击的表单索引是：'+index+'；改变后的表单值是：'+value);
&p&&a href=&&&网页代码站&/a& - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码！&/p&
jQuery插件实现的一款表单效果，点击“+”“—”加减号手动改变表单数值，也可以手动改变数值，支持键盘控制，点击后会给出结果：“你点击的表单索引是：3；改变后的表单值是：2“。参数设置：Minus:点击元素--减小；Add:点击元素--增加； Input:表单元素；Min:表单的最小值，非负整数；Max:表单的最大值，正整数。
一、如果您使用的浏览器版本为IE6.0、360浏览器V3.0.8.1版本或者IE的更低版本浏览本页面，建议您升级浏览器至IE7以上，上面的“运行”按钮可能不能用，但您可按以下方式查看。运行代码方式：1、点击“复制”按钮；2、在桌面建立一个txt文档；3、粘贴复制的代码；4、最后把txt的扩展名改为“htm”或“html”；5、完成，打开即可看到效果。二、如果您使用FireFox或者非IE浏览器，建议您使用IE7以上版本。上面的“复制”按钮失效，请您“全选”，以普通方式复制！三、某些代码因需加载完Jquery等之类比较大的JS文件，如果您看不到效果，请您刷新页面！四、某些代码不能完全兼容各浏览器，还请您再次修改才能使用！给您带来的不便！尽请谅解！谢谢您的支持！
Powered by (网页即"web" + 代码即"dm" + "cn" = ) | 最专业的代码下载网站 - 致力为中国站长提供高质量的代码！jQuery实现购物车数字加减效果 jQuery实现购物车数字加减效果 作者:
浏览(18,315)
jQuery实现数字效果，方法本简单。经常会写到购物车这块，而购物车很多就有加减这个效果（可以将HTML代码复制多个，同时支持），小小的总结了一下，代码如下：HTML&div class="gw_num"&
&em class="jian"&-&/em&
&input type="text" value="1" class="num"/&
&em class="add"&+&/em&
&/div&css.gw_num{border: 1px solid #width: 110line-height: 26overflow:}
.gw_num em{display:height: 26width: 26float:color: #7A7979;border-right: 1px solid #text-align:cursor:}
.gw_num .num{display:float:text-align:width: 52font-style:font-size: 14line-height: 24border: 0;}
.gw_num em.add{float:border-right: 0;border-left: 1px solid #}jQuery$(document).ready(function(){
//加的效果
$(".add").click(function(){
var n=$(this).prev().val();
var num=parseInt(n)+1;
if(num==0){}
$(this).prev().val(num);
//减的效果
$(".jian").click(function(){
var n=$(this).next().val();
var num=parseInt(n)-1;
if(num==0){ return}
$(this).next().val(num);
猜你喜欢随机文章友情链接