jQuery實現(xiàn)數(shù)字加減效果匯總
我們在網(wǎng)上購物提交訂單時，在網(wǎng)頁上一般會有一個選擇數(shù)量的控件，要求買家選擇購買商品的件數(shù)，開發(fā)者會把該控件做成可以通過點擊實現(xiàn)加減等微調操作，當然也可以直接輸入數(shù)字件數(shù)。
左右加減數(shù)字
像京東提交訂單時目前使用的是左右加減數(shù)字的效果，這個效果直接明了，操作簡單。我們使用jquery.spinner.js插件實現(xiàn)左右加減數(shù)字，調用方法非常簡單。
<input type="text" class="spinner"/>
調用也非常簡單，先載入jquery庫文件和jquery.spinner.js，然后使用以下代碼：
$('.spinner').spinner();
Bootstrap風格，右側加減
Bootstrap火了很久了，基于bootstrap風格的各類應用也非常多，下面給大家介紹一個基于bootstrap的數(shù)字加減插件，可以設置最小值、最大值、遞增遞減（步長值），可手動輸入數(shù)字。
<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查看相關參數(shù)設置。
jQuery ui風格，右側加減
jQuery ui也提供了數(shù)字加減插件，可以設置最小值、最大值、遞增遞減（步長值），可手動輸入數(shù)字。
<input type="text" id="spinner"/>
如果你的項目使用了jquery ui，那就可以調用jquery ui來實現(xiàn)數(shù)字加減的功能了。
$("#spinner").spinner({
max:10,
min:0,
step:2
});
以上幾種就是本人在項目中使用的關于jQuery實現(xiàn)數(shù)字加減的方法，整理出來分享給大家用，雖然功能比較簡單，但是很實用。
相關文章
Jquery選擇子控件"大于號"和" "區(qū)別介紹及使用示例
Jquery選擇子控件”>“：在給定的父元素下匹配所有的子元素；另一個就是在給定的祖先元素下匹配所有的后代元素，具體概述及使用示例如下，感興趣的朋友可以參考下哈2013-06-06
這篇文章主要介紹了jQuery實現(xiàn)表格的增、刪、改操作,涉及基于jQuery的事件響應及頁面元素動態(tài)操作相關實現(xiàn)技巧,需要的朋友可以參考下2019-01-01
這篇文章主要為大家分享了jQuery產(chǎn)品間斷向下滾動的核心代碼,需要的朋友可以參考下2014-05-05
jquery簡單實現(xiàn)鼠標經(jīng)過導航條改變背景圖
鼠標經(jīng)過導航條改變背景圖的效果很是好看，下面為大家介紹下使用jquery是如何實現(xiàn)的，感興趣的朋友可以參考下2013-12-12
jquery動態(tài)加載js/css文件方法(自寫小函數(shù))
jquery自帶的getSrcript文件只能動態(tài)加載js代碼，但不能加載css，后來自己寫了一個可加載js與css的程序2014-10-10
jQuery CSS3自定義美化Checkbox實現(xiàn)代碼
這篇文章主要為大家詳細介紹了jQuery CSS3自定義美化Checkbox實現(xiàn)代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-05-05
jQuery實現(xiàn)仿淘寶帶有指示條的圖片轉動切換效果完整實例
這篇文章主要介紹了jQuery實現(xiàn)仿淘寶帶有指示條的圖片轉動切換效果的方法,以完整實例形式較為詳細的分析了jQuery圖片特效的使用技巧,需要的朋友可以參考下2015-03-03
JQuery中Ajax的運用相信很多人都已熟悉，本文主要是記錄下個人實踐中的應用知識，旨在加強記憶。2011-09-09
利用JQuery+EasyDrag 實現(xiàn)彈出可拖動的Div，同時向Div傳值，然后返回Div選中的值
JQuery是一個優(yōu)秀的Javascript類庫，使得我們曾經(jīng)對JavaScript的痛恨不再，越來越喜歡上了JavaScript，而且更好的是他的plugin眾多.2009-10-10
這篇文章主要為大家詳細介紹了jquery動感漂浮導航菜單特效，菜單可以實現(xiàn)上下浮動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2015-08-08