快捷導(dǎo)航

jquery實(shí)現(xiàn)數(shù)字輸入框

更新時(shí)間：2017年02月22日 10:17:32 作者：sirius周周

本文主要分享了jquery實(shí)現(xiàn)數(shù)字輸入框的示例代碼，具有很好的參考價(jià)值，下面跟著小編一起來看下吧

效果如下：

代碼如下：

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <script type="text/javascript" charset="utf-8" src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js">
 </script>
 </head>
 <style>
 #reduce,#add{
 width: 50px;
 height: 50px;
 text-align: center;
 line-height: 50px;
 border: 1px solid #000000;
 font-size: 28px;
 font-weight: bold;
 float: left;
 cursor: pointer;
 }
 #numVal{
 width: 100px;
 height: 46px;
 text-align: center;
 line-height: 46px;
 float: left;
 }
 </style>
 <body>
 <div>
 <div id="reduce">-</div>
 <input id="numVal" />
 <div id="add">+</div>
 </div>
 </body>
 <script type="text/javascript">
 $(function(){
 var setInitVal=20;//設(shè)定初始值
 var setMax=30;//設(shè)定最大值
 var setInterval=2;//設(shè)定間隔
 $("#numVal")[0].value = setInitVal;
 $("#reduce").click(function() {
 $("#numVal")[0].value=Number($("#numVal")[0].value)-setInterval;
  if($("#numVal")[0].value < 0) {
  $("#numVal")[0].value = 0;
  }
 if($("#numVal")[0].value > setMax) {
  $("#numVal")[0].value = setMax;
 }
 })
 $("#add").click(function() {
 $("#numVal")[0].value=Number($("#numVal")[0].value)+setInterval;
  if($("#numVal")[0].value > setMax) {
  $("#numVal")[0].value = setMax;
  }
 if($("#numVal")[0].value < 0) {
  $("#numVal")[0].value = 0;
 }
 })
 $("#numVal").on("blur", function() {
 if($("#numVal")[0].value > setMax) {
  $("#numVal")[0].value = setMax;
 }
 if($("#numVal")[0].value < 0) {
  $("#numVal")[0].value = Math.abs($("#numVal")[0].value)
 }
 $("#numVal")[0].value = Number($("#numVal")[0].value)
 if(($("#numVal")[0].value) == "NaN") {
  $("#numVal")[0].value = 1;
 }
 })
 })
 </script>
</html>

以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時(shí)也希望多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

layui選項(xiàng)卡效果實(shí)現(xiàn)代碼
這篇文章主要為大家詳細(xì)介紹了layui彈出層效果的實(shí)現(xiàn)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-05-05
jquery ajax 局部刷新小案例
這篇文章主要是對(duì)jquery ajax 局部刷新的小案例進(jìn)行了介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助
2014-02-02
淺談EasyUI中Treegrid節(jié)點(diǎn)的刪除
本文給大家介紹的是EasyUI中樹節(jié)點(diǎn)（Treegrid節(jié)點(diǎn)）的刪除的方法和示例，這里推薦給大家，希望對(duì)大家能有所幫助。
2015-03-03
jQuery動(dòng)畫animate方法使用介紹
用于創(chuàng)建自定義動(dòng)畫的函數(shù)。這個(gè)函數(shù)的關(guān)鍵在于指定動(dòng)畫形式及結(jié)果樣式屬性對(duì)象，下面為大家詳細(xì)介紹下animate方法的具體使用，感興趣的朋友可以了解下哈
2013-05-05
jQuery EasyUI常用數(shù)據(jù)驗(yàn)證匯總
這篇文章主要為大家詳細(xì)匯總了jQuery EasyUI常用數(shù)據(jù)驗(yàn)證,介紹了validatebox()提供的自定義驗(yàn)證，感興趣的小伙伴們可以參考一下
2016-09-09
jQuery獲取(選中)單選,復(fù)選框,下拉框中的值
本篇文章主要是對(duì)jQuery獲取(選中)單選,復(fù)選框,下拉框中的值的實(shí)現(xiàn)方法進(jìn)行了介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助
2014-02-02
基于jQuery對(duì)象和DOM對(duì)象和字符串之間的轉(zhuǎn)化實(shí)例
下面小編就為大家?guī)硪黄趈Query對(duì)象和DOM對(duì)象和字符串之間的轉(zhuǎn)化實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-08-08
jQuery實(shí)現(xiàn)下拉菜單的實(shí)例代碼
本文通過實(shí)例代碼給大家講解了jQuery實(shí)現(xiàn)下拉菜單效果,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2017-06-06
推薦10款最熱門jQuery UI框架
在進(jìn)行Web開發(fā)時(shí)，并非所有的庫都適合你的項(xiàng)目，但你仍需要收藏一些Web UI設(shè)計(jì)相關(guān)的庫或框架，以在你需要的時(shí)候，加快你的開發(fā)效率。本文為你推薦10款非常優(yōu)秀的基于JQuery的Web UI設(shè)計(jì)框架
2014-08-08
JS JQUERY實(shí)現(xiàn)滾動(dòng)條自動(dòng)滾到底的方法
這篇文章主要介紹了JS JQUERY實(shí)現(xiàn)滾動(dòng)條自動(dòng)滾到底的方法,需要的朋友可以參考下
2015-01-01