一个NumericStepper组件

作者：wangyongshan 来源：51js 时间：2010-01-22 15:46:00　

下面是我写的NumericStepper：

谢谢果果和 Rimifon ，我对代码进行了完善，支持自适应小数位数：

代码写的不是很精简，还请大家多多建议！

增加了点击超时计时器，解决太灵的感觉，点一下会产生两次增加或减小。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.min.js"></script> <script type="text/javascript"> (function($){ $.fn.NumericStepper = function( opts ){ // 转成 Number行 var toNum = function( n ){ return Number(n); }; // 获取小数点位数 var getFixedNum = function( n ){ var _arr = n.toString().split("."); var _fm = ( _arr.length == 2 ? _arr[1].length : 0 ); // toFixed(i) 方法的参数值范围是 0 - 20 if( _fm.length >= 20 ){ _fm = 20; } return _fm; }; var defOpts = { id : null, min : null, max : null, stepsize : 1, value : 0 }; var _interval = null, _opt = $.extend({}, defOpts, opts ); // 计算小数点Fixed位数，= min,max,stepsize中的最大小数点位数 var _fixed = 0; _fixed = Math.max( getFixedNum( _opt.min ), getFixedNum( _opt.max ), getFixedNum( _opt.stepsize ) ); // 根据value初始化值 $(this).val( toNum(_opt.value).toFixed( _fixed ) ); var _nsID = $(this).attr("id") || $(this).attr("name"); $(this).attr("id", _nsID); _opt.id = _nsID; // 在输入框中按下上下方向键 $(this).bind("keydown", function(e){ var _keyCode = e.which ? e.which : e.keyCode; if( _keyCode == 38 ){ doNumericStepper( _opt, "UP" ); } if( _keyCode == 40 ){ doNumericStepper( _opt, "DOWN" ); } }).bind("keyup", function(e){ var _keyCode = e.which ? e.which : e.keyCode; if( _keyCode == 38 ){ stopNumericStepper(); } if( _keyCode == 40 ){ stopNumericStepper(); } }); $("#NumStepperUP-"+_opt.id) .bind("mousedown", function(){ doNumericStepper( _opt, "UP" ); }) .bind("mouseup", function(){ stopNumericStepper(); }); $("#NumStepperDown-"+_opt.id) .bind("mousedown", function(){ doNumericStepper( _opt, "DOWN" ); }) .bind("mouseup", function(){ stopNumericStepper(); }); var stopNumericStepper = function(){ if( _interval ) clearInterval( _interval ); _interval = null; $("#"+_nsID).focus(); }; var doNumericStepper = function( opt, type ){ var _ns = $("#"+opt.id)[0]; var _count = 0; switch( type ){ case 'UP': if( opt.max != null && toNum(_ns.value) >= toNum(opt.max) ){ return false; } _ns.value = (toNum(_ns.value)+ toNum(opt.stepsize)).toFixed(_fixed); _interval = setInterval(function(){ if( opt.max != null && toNum(_ns.value) >= toNum(opt.max) ){ if( _interval ) clearInterval( _interval ); return false; } if( ++_count < 10 ) return; // 模拟超时 _ns.value = (toNum(_ns.value )+ toNum(opt.stepsize)).toFixed(_fixed); }, 50); break; case 'DOWN': if( opt.min != null && toNum(_ns.value) <= toNum(opt.min) ){ return false; } _ns.value = (toNum(_ns.value)- toNum(opt.stepsize)).toFixed(_fixed); _interval = setInterval(function(){ if( opt.min != null && toNum(_ns.value) <= toNum(opt.min) ){ if( _interval ) clearInterval( _interval ); return false; } if( ++_count < 10 ) return; // 模拟超时 _ns.value = (toNum(_ns.value)- toNum(opt.stepsize)).toFixed(_fixed); }, 50); break; } }; } })(jQuery); $(function(){ $("#num1").NumericStepper({min:0, max:20, stepsize:1, value:0}); $("#num2").NumericStepper({min:0.0, max:1.0, stepsize:0.1}); $("#num3").NumericStepper({min:0.0, max:1.55, stepsize:0.05}); }); </script> </head><body> <div> <input type="text" name="num1" value="" id="num1"/> <input type="button" id="NumStepperUP-num1" value="+"/> <input type="button" id="NumStepperDown-num1" value="-"/> {min:0, max:20, stepsize:1, value:0} </div> <div> <input type="text" name="num2" id="num2" value=""/> <input type="button" id="NumStepperUP-num2" value="+"/> <input type="button" id="NumStepperDown-num2" value="-"/> {min:0.0, max:1.0, stepsize:0.1} </div> <div> <input type="text" name="num3" id="num3" value=""/> <input type="button" id="NumStepperUP-num3" value="+"/> <input type="button" id="NumStepperDown-num3" value="-"/> {min:0.0, max:1.55, stepsize:0.05} </div> </body></html>

标签：组件,JavaScript,小数

投稿

一个NumericStepper组件

猜你喜欢

Python循环语句之break与continue的用法

修改MySQL数据库中表和表中字段的编码方式的方法

JS简单实现DIV相对于浏览器固定位置不变的方法

vue基本使用--refs获取组件或元素的实例

RS.GETROWS使用详解

Python获取当前时间的方法

Python数据类型详解（三）元祖：tuple

python爬虫实例详解

HTTP服务压力测试工具及相关术语讲解

用Python分析3天破10亿的《我不是药神》到底神在哪?

MySQL中查询字段为空或者为null的方法

Python functools模块学习总结

工作需要写的一个js拖拽组件

Python实现计算函数或程序执行时间

用Python编写生成树状结构的文件目录的脚本的教程

浅谈SQL Server 2016里TempDb的进步

Python接口自动化之浅析requests模块get请求

Django websocket原理及功能实现代码

pandas数据清洗,排序,索引设置,数据选取方法

MySQL数据库改名的详细方法教程