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 相关文章推荐
JavaScript 实现模态对话框 源代码大全
May 02 Javascript
jquery移动点击的项目到列表最顶端的方法
Jun 24 Javascript
js实现简易的单数字随机抽奖(0-9)
Mar 19 Javascript
跟我学习javascript的undefined与null
Nov 17 Javascript
浅谈JavaScript变量的自动转换和语句
Jun 12 Javascript
JavaScript 闭包机制详解及实例代码
Oct 10 Javascript
使用Curl命令查看请求响应时间方法
Nov 04 Javascript
浅析JavaScript中break、continue和return的区别
Nov 30 Javascript
微信小程序 连续旋转动画(this.animation.rotate)详解
Apr 07 Javascript
jQuery实现左右滑动的toggle方法
Mar 03 jQuery
react native 获取地理位置的方法示例
Aug 28 Javascript
对node通过fs模块判断文件是否是文件夹的实例讲解
Jun 10 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
1 Tube Radio
2021/03/02 无线电
PHP应用JSON技巧讲解
2013/02/03 PHP
PHP调试函数和日志记录函数分享
2015/01/31 PHP
phpStudy配置多站点多域名和多端口的方法
2017/09/01 PHP
javascript 面向对象编程基础:继承
2009/08/21 Javascript
JavaScript中的几个关键概念的理解-原型链的构建
2011/05/12 Javascript
页面右下角弹出提示框示例代码js版
2013/08/02 Javascript
jQuery 回调函数(callback)的使用和基础
2015/02/26 Javascript
JS组件Bootstrap实现下拉菜单效果代码
2016/04/26 Javascript
基于JS模仿windows文件按名称排序效果
2016/06/29 Javascript
JS实现超简单的汉字转拼音功能示例
2016/12/22 Javascript
微信小程序  http请求封装详解及实例代码
2017/02/15 Javascript
Nodejs中Express 常用中间件 body-parser 实现解析
2017/05/22 NodeJs
Angular中的$watch、$watchGroup、$watchCollection
2017/06/25 Javascript
vue.js  父向子组件传参的实例代码
2017/10/29 Javascript
浅谈webpack打包之后的文件过大的解决方法
2018/03/07 Javascript
原生js实现商品筛选功能
2019/10/28 Javascript
Js视频播放器插件Video.js使用方法详解
2020/02/04 Javascript
js实现随机圆与矩形功能
2020/10/29 Javascript
Python实现从脚本里运行scrapy的方法
2015/04/07 Python
python版简单工厂模式
2017/10/16 Python
pip安装Python库时遇到的问题及解决方法
2017/11/23 Python
Python获取Redis所有Key以及内容的方法
2019/02/19 Python
PYTHON如何读取和写入EXCEL里面的数据
2019/10/28 Python
python实现连续变量最优分箱详解--CART算法
2019/11/22 Python
python的scipy.stats模块中正态分布常用函数总结
2021/02/19 Python
青奥会口号
2014/06/12 职场文书
群众路线教育实践活动整改落实情况汇报
2014/10/28 职场文书
检讨书范文300字
2015/01/28 职场文书
毕业实习证明范本
2015/06/16 职场文书
学困生转化工作总结
2015/08/13 职场文书
《祁黄羊》教学反思
2016/02/20 职场文书
解决golang post文件时Content-Type出现的问题
2021/05/02 Golang
Go语言实现一个简单的并发聊天室的项目实战
2022/03/18 Golang
js前端面试常见浏览器缓存强缓存及协商缓存实例
2022/06/21 Javascript
Nginx如何配置多个服务域名解析共用80端口详解
2022/09/23 Servers