jquery实现数字输入框
更新时间：2017年02月22日 10:17:32 作者：sirius周周
本文主要分享了jquery实现数字输入框的示例代码，具有很好的参考价值，下面跟着小编一起来看下吧
效果如下：
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" charset="utf-8" src="//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;//设定初始值
var setMax=30;//设定最大值
var setInterval=2;//设定间隔
$("#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>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！
您可能感兴趣的文章:
相关文章
这篇文章主要为大家详细介绍了layui弹出层效果的实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
这篇文章主要是对jquery ajax 局部刷新的小案例进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-02-02
本文给大家介绍的是EasyUI中树节点（Treegrid节点）的删除的方法和示例，这里推荐给大家，希望对大家能有所帮助。2015-03-03
用于创建自定义动画的函数。这个函数的关键在于指定动画形式及结果样式属性对象，下面为大家详细介绍下animate方法的具体使用，感兴趣的朋友可以了解下哈2013-05-05
这篇文章主要为大家详细汇总了jQuery EasyUI常用数据验证,介绍了validatebox()提供的自定义验证，感兴趣的小伙伴们可以参考一下2016-09-09
本篇文章主要是对jQuery获取(选中)单选,复选框,下拉框中的值的实现方法进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-02-02
下面小编就为大家带来一篇基于jQuery对象和DOM对象和字符串之间的转化实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
本文通过实例代码给大家讲解了jQuery实现下拉菜单效果,非常不错，具有参考借鉴价值，需要的朋友可以参考下2017-06-06
在进行Web开发时，并非所有的库都适合你的项目，但你仍需要收藏一些Web UI设计相关的库或框架，以在你需要的时候，加快你的开发效率。本文为你推荐10款非常优秀的基于JQuery的Web UI设计框架2014-08-08
这篇文章主要介绍了JS JQUERY实现滚动条自动滚到底的方法,需要的朋友可以参考下2015-01-01
最新评论