jquery實現(xiàn)數(shù)字輸入框
更新時間：2017年02月22日 10:17:32 作者：sirius周周
本文主要分享了jquery實現(xiàn)數(shù)字輸入框的示例代碼，具有很好的參考價值，下面跟著小編一起來看下吧
效果如下：
代碼如下：
<!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>
以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細介紹了layui彈出層效果的實現(xiàn)代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
這篇文章主要是對jquery ajax 局部刷新的小案例進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-02-02
本文給大家介紹的是EasyUI中樹節(jié)點（Treegrid節(jié)點）的刪除的方法和示例，這里推薦給大家，希望對大家能有所幫助。2015-03-03
用于創(chuàng)建自定義動畫的函數(shù)。這個函數(shù)的關(guān)鍵在于指定動畫形式及結(jié)果樣式屬性對象，下面為大家詳細介紹下animate方法的具體使用，感興趣的朋友可以了解下哈2013-05-05
jQuery EasyUI常用數(shù)據(jù)驗證匯總
這篇文章主要為大家詳細匯總了jQuery EasyUI常用數(shù)據(jù)驗證,介紹了validatebox()提供的自定義驗證，感興趣的小伙伴們可以參考一下2016-09-09
本篇文章主要是對jQuery獲取(選中)單選,復(fù)選框,下拉框中的值的實現(xiàn)方法進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-02-02
基于jQuery對象和DOM對象和字符串之間的轉(zhuǎn)化實例
下面小編就為大家?guī)硪黄趈Query對象和DOM對象和字符串之間的轉(zhuǎn)化實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
本文通過實例代碼給大家講解了jQuery實現(xiàn)下拉菜單效果,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-06-06
在進行Web開發(fā)時，并非所有的庫都適合你的項目，但你仍需要收藏一些Web UI設(shè)計相關(guān)的庫或框架，以在你需要的時候，加快你的開發(fā)效率。本文為你推薦10款非常優(yōu)秀的基于JQuery的Web UI設(shè)計框架2014-08-08
這篇文章主要介紹了JS JQUERY實現(xiàn)滾動條自動滾到底的方法,需要的朋友可以參考下2015-01-01