jquery实现数字输入框


Posted in Javascript onFebruary 22, 2017

效果如下:

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>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
SyntaxHighlighter代码加色使用方法
Sep 07 Javascript
js文件中调用js的实现方法小结
Oct 23 Javascript
用jQuery获取IE9下拉框默认值问题探讨
Jul 22 Javascript
为jQuery添加Webkit的触摸的方法分享
Feb 02 Javascript
JS中实现简单Formatter函数示例代码
Aug 19 Javascript
javascript简单实现类似QQ头像弹出效果的方法
Aug 03 Javascript
JavaScript实现多种排序算法
Feb 24 Javascript
javascript的document中的动态添加标签实现方法
Oct 24 Javascript
element-ui upload组件多文件上传的示例代码
Oct 17 Javascript
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
Jun 18 jQuery
详解vuex的简单todolist例子
Jul 14 Javascript
JS使用正则表达式判断输入框失去焦点事件
Oct 16 Javascript
微信小程序 开发之滑块视图容器(swiper)详解及实例代码
Feb 22 #Javascript
js实现无缝滚动图(可控制当前滚动的方向)
Feb 22 #Javascript
vuejs2.0实现一个简单的分页示例
Feb 22 #Javascript
Angular.js与node.js项目里用cookie校验账户登录详解
Feb 22 #Javascript
js实现无缝滚动图
Feb 22 #Javascript
JavaScript实现二分查找实例代码
Feb 22 #Javascript
浅谈jquery拼接字符串效率比较高的方法
Feb 22 #Javascript
You might like
php 文件上传类代码
2011/08/06 PHP
jQuery建立一个按字母顺序排列的友好页面索引(兼容IE6/7/8)
2013/02/26 Javascript
javaScript对文字按照拼音排序实现代码
2013/12/27 Javascript
js sort 二维数组排序的用法小结
2014/01/24 Javascript
IE下双击checkbox反应延迟问题的解决方法
2014/03/27 Javascript
jquery如何扑捉回车键触发的事件
2014/04/24 Javascript
取得元素的左和上偏移量的方法
2014/09/17 Javascript
jquery渐隐渐显的图片幻灯闪烁切换实现方法
2015/02/26 Javascript
javascript中hasOwnProperty() 方法使用指南
2015/03/09 Javascript
js实现3D图片逐张轮播幻灯片特效代码分享
2015/09/09 Javascript
AngularJS动态生成div的ID源码解析
2016/08/29 Javascript
jQuery中DOM节点的删除方法总结(超全面)
2017/01/22 Javascript
JS排序之冒泡排序详解
2017/04/08 Javascript
分析JS中this引发的bug
2017/12/12 Javascript
关于微信小程序登录的那些事
2019/01/08 Javascript
vue中keep-alive组件的入门使用教程
2019/06/06 Javascript
小程序实现横向滑动日历效果
2019/10/21 Javascript
node.js中 mysql 增删改查操作及async,await处理实例分析
2020/02/11 Javascript
利用JavaScript模拟京东按键输入功能
2020/12/01 Javascript
jQuery实现动态向上滚动
2020/12/21 jQuery
原生js 实现表单验证功能
2021/02/08 Javascript
解决Python 爬虫URL中存在中文或特殊符号无法请求的问题
2018/05/11 Python
python直接获取API传递回来的参数方法
2018/12/17 Python
VPS CENTOS 上配置python,mysql,nginx,uwsgi,django的方法详解
2019/07/01 Python
python制作英语翻译小工具代码实例
2019/09/09 Python
Python实现在Windows平台修改文件属性
2020/03/05 Python
python判断元素是否存在的实例方法
2020/09/24 Python
python音频处理的示例详解
2020/12/23 Python
python 邮件检测工具mmpi的使用
2021/01/04 Python
Java面试题汇总
2015/12/06 面试题
20年同学聚会感言
2014/02/03 职场文书
警示教育活动总结
2014/05/05 职场文书
乡镇计划生育工作汇报
2014/10/28 职场文书
保姆聘用合同
2015/09/21 职场文书
2016年寒假见闻
2015/10/10 职场文书
Django集成富文本编辑器summernote的实现步骤
2021/05/31 Python