js代码_js特效免费下载_JS特效代码网   网页特效   鼠标特效   js图片相册   js特效代码大全
当前位置:首页 > 网页特效 > JS常用代码 > 表单按钮

jQuery input表单按钮设置数字增加减少特效代码

发布时间:2017-03-08 15:53:19    您是第0位浏览者

本js特效代码兼容:ie6 、ie7 、ie8 、ie9 、ie10 、ie11 、chrome 、firefox 、opera 、safari 、 等浏览器

jQuery input表单按钮设置数字增加减少特效代码

jQuery input表单按钮设置数字增加减少特效代码

<!DOCTYPE html>    
<html>    
<head>    
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
	<script type="text/javascript" src="js/jquery.min.js"></script>    
	<script type="text/javascript" src="js/num-alignment.js"></script>    
</head>    
<body>    
	<!-- 
    
		1.本插件基于jquery基础封装的轻量级插件,使用时只需导入num-alignment.js即可;    
		2.插件设置默认值:{"step" : 0.1, "min" : 0, "max" : 99, "digit" : 1};    
		3.可以自定义设置类型   ——》 通过设置 num-alignment.js中下方data中添加;    
		4.引用自定义类型通过  input框中设置  user_data属性;    
		5.如果认为插件数据设置不够合理可通过 data_step,data_min,data_max,data_digit四个属性设置步长、最小值、最大值、小数位数;    
		     ☆:注意属性值将会覆盖类型值;    
		6.插件默认设置readonly,如果你想设置为编辑,可通过属性 data_edit="true"设置;    
		7.插件为自动装载,但是必须设置 user_data,data_step,data_min,data_max,data_digit,属性中的一个或者引用alignment css类;    
		8.插件宽度通过计算所得,只能通过设置长度来调整,宽度设定将被忽略;    
		9.一个页面多个插件时必须设置每个元素id    
		作者信息:wagk(一个java小白)	QQ:773279595 
    
	 -->    
	不可编辑:<input id="1" class="alignment" value="15.1"/><br><br>    
	可编辑:<input id="2" class="alignment" data_edit="true" value="15.1"/><br><br>    
	自定义类型:<input id="3" user_data="aaa" value="5"/><br><br>    
	默认类型设置最大值:<input id="4" data_max="11" value="10"/><br><br>    
	自定义数据:<input id="5" data_step="5" data_min="5" data_max="50" data_digit="0" value="10"/><br><br>    
	设置长度:<input id="6" style="width:100px;" class="alignment" value="15.1"/>    
</body>    
</html>
(function($){ 
	var functions = {
		init:function(input, step, max, min, digit){
			var width = input.width()-3;
			var height = input.width()/4;
			var _this = this;
		 	width += 3;
		 	
		 	input.attr("readonly", "readonly");
		 	//设置不分样式
			input.css("border", "none");
			input.css("width", width-height*2-2);
			input.css("height", height);
			input.css("padding", "0px");
			input.css("margin", "0px");
			input.css("text-align", "center");
			input.css("vertical-align", "middle");
			input.css("line-height", height + "px");
			
			
			//添加左右加减号
			input.wrap("<div style = 'overflow:hidden;width:" + width + "px;height:" + height + "px;border: 1px solid #CCC;'></div>");
			input.before("<div id = '" + input.attr('id') + "l'  onselectstart = 'return false;' style = '-moz-user-select:none;cursor:pointer;text-align:center;width:" + height + "px;height:" + height + "px;line-height:" + height + "px;border-right: 1px solid #CCC;float:left'>-</div>");
			input.after("<div id = '" + input.attr('id') + "r'  onselectstart = 'return false;' style = '-moz-user-select:none;cursor:pointer;text-align:center;width:" + height + "px;height:" + height + "px;line-height:" + height + "px;border-left: 1px solid #CCC;float:right'> + </div>");
			//左右调用执行
			$("#" + input.attr('id') + "l").click(function(){
				_this.execute(input, step, max, min, digit, true);
			});
			$("#" + input.attr('id') + "r").click(function(){
				_this.execute(input, step, max, min, digit, false);
			});
		},
		execute:function(input, step, max, min, digit, _do){
			var val = parseFloat(this.format(input.val(), digit));
			var ori = val;
			if(_do) val -= step;
			if(!_do) val += step;
			if(val<min){
				val  =  min;
			}else if(val>max){
				val  =  max;
			}
			input.val(this.format(val, digit));
		},
		format:function(val, digit){
			if(isNaN(val)){ 
				val = 0;
			}
			return parseFloat(val).toFixed(digit);	
		}
	};
	
	
    $(function(){
    	//使用控件必须有以下属性或者引用alignment类
		var inputs = $("input[user_data], input[data_digit], input[data_step], input[data_min], input[data_max], input.alignment");
		inputs.each(function(){
			//预设值数据选择
			var data = {
			            default_data : 	{"step" : 0.1, "min" : 0, "max" : 99, "digit" : 1}, 
			            aaa : 			{"step" : 0.5, "min" : 5, "max" : 20, "digit" : 1}, 
						}
			
			var user_data = eval("data." + $(this).attr("user_data"));
			if(user_data == null){
				user_data = data.default_data;
			}
			
			var digit = $(this).attr("data_digit");
			if(digit != null&&!isNaN(parseFloat(digit))){
				digit  =  parseFloat(digit).toFixed(0);
				user_data.digit = parseFloat(digit);
			}
			
			var step = $(this).attr("data_step");
			if(step != null &&!isNaN(parseFloat(step))){
				user_data.step = parseFloat(step);
			}
			var min = $(this).attr("data_min");
			if(min != null &&!isNaN(parseFloat(min))){
				user_data.min = parseFloat(min);
			}
			
			var max = $(this).attr("data_max");
			if(max != null &&!isNaN(parseFloat(max))){
				user_data.max = parseFloat(max);
			}
			//自动装载
	        functions.init($(this), user_data.step, user_data.max, user_data.min, user_data.digit);
	        
	        var data_edit = $(this).attr("data_edit");
	        if(data_edit){
	        	$(this).attr("readonly",null);
	        }
		});
	})  
})(jQuery);



表单 按钮

js美化会员注册表单特效

jquery qq表情插件,鼠标点击qq表情图片插入文本框表单

css3对话框插件来制作动画弹出表单特效

jquery实现带有遮罩弹出层登录注册表单窗口特效

jquery会员注册表单验证特效

js实现会员注册表单验证特效

js实现城市三级联动下拉表单选择特效

jquery实现顶部滑出式联系我们表单特效代码

jQuery autocompleter插件实现搜素框表单自动完成功能

jQuery Gips插件实现,鼠标浮动在表单输入框,文字提示泡泡特效代码

jquery实现带注册表单功能,另外背景实现宽屏幻灯片特效代码

js+html5用户注册表单进度条提示特效代码

jquery会员注册表单验证实例特效代码

jQuery实现插入表情留言或评论表单特效代码

jquery css3带背景透明登录注册表单提交代码

jQuery实现注册页面表单、表单提交验证特效代码

漂亮的表单NiceJForms v0.1(3种样式)

jQuery input表单按钮设置数字增加减少特效代码

js实现简单的快速预约表单信息提交特效代码