(function( $ ){
$.fn.numberUnit =function(options){
//默认设置
var settings={
//激发对象
this$:null,
automaticRendering:true,
ISnotchange:true,
//始化方法
init:function(clickElement){
settings.returnThis$(clickElement);
//拓展替换本插件的事件
$.extend(settings,options);
if(settings.automaticRendering){
//获取所有指定的input
var Element = $('input[unit="true"]',settings.this$);
settings.getThisPageInput(Element);
}else{
settings.getThisPageInput(settings.this$);
}
},
getThisPageInput:function(Element){
//输入事件
Element.bind('input',function(){
//获取当前input的值
var thisNum = $(this).val();
//删除当前input右侧单位
$(this).parent().find('.unit').remove();
//如果input值大于999(1000+)则转换为带千位符的
if(999<thisNum){
var newNum = settings.formatCurrency(thisNum);
}
//定位父元素
$(this).parent().css('position','relative');
//根据当前值判断单位
if(99<thisNum&&thisNum<=999){
layer.tips('<span>'+thisNum+'</span><span >(百)</span>', $(this), {
tips: [1, '#03A9F4'],
time: 3000
});
//$(this).parent().append('<div class="unit"></div>');
}else if(999<thisNum&&thisNum<=9999){
layer.tips('<span>'+newNum+'</span><span >(千)</span>', $(this), {
tips: [1, '#03A9F4'],
time: 3000
});
//$(this).parent().append('<div class="unit"><span>'+newNum+'</span><span >(千)</span></div>');
}else if(9999<thisNum&&thisNum<=99999){
layer.tips('<span>'+newNum+'</span><span >(万)</span>', $(this), {
tips: [1, '#03A9F4'],
time: 3000
});
//$(this).parent().append('<div class="unit"><span>'+newNum+'</span><span >(万)</span></div>');
}else if(99999<thisNum&&thisNum<=999999){
layer.tips('<span>'+newNum+'</span><span >(十万)</span>', $(this), {
tips: [1, '#3595CC'],
time: 3000
});
//$(this).parent().append('<div class="unit"><span>'+newNum+'</span><span >(十万)</span></div>');
}else if(999999<thisNum&&thisNum<=9999999){
layer.tips('<span>'+newNum+'</span><span >(百万)</span>', $(this), {
tips: [1, '#F44336'],
time: 3000
});
//$(this).parent().append('<div class="unit"><span>'+newNum+'</span><span >(百万)</span></div>');
}else if(999999<thisNum&&thisNum<=99999999){
layer.tips('<span>'+newNum+'</span><span >(千万)</span>', $(this), {
tips: [1, '#ef2718'],
time: 3000
});
//$(this).parent().append('<div class="unit"><span>'+newNum+'</span><span >(千万)</span></div>');
}else if(99999999<thisNum&&thisNum<=999999999){
layer.tips('<span>'+newNum+'</span><span >(亿)</span>', $(this), {
tips: [1, '#f31f0f'],
time:3000
});
//$(this).parent().append('<div class="unit"><span>'+newNum+'</span><span >(亿)</span></div>');
}else if(999999999<thisNum&&thisNum<=9999999999){
layer.tips('<span>'+newNum+'</span><span >(十亿)</span>', $(this), {
tips: [1, '#f31f0f'],
time: 3000
});
//$(this).parent().append('<div class="unit"><span>'+newNum+'</span><span >(十亿)</span></div>');
}else if(9999999999<thisNum&&thisNum<=99999999999){
layer.tips('<span>'+newNum+'</span><span >(百亿)</span>', $(this), {
tips: [1, '#f31f0f'],
time: 3000
});
//$(this).parent().append('<div class="unit"><span>'+newNum+'</span><span >(百亿)</span></div>');
}else if(99999999999<thisNum&&thisNum<=999999999999){
layer.tips('<span>'+newNum+'</span><span >(千亿)</span>', $(this), {
tips: [1, '#f31f0f'],
time: 3000
});
//$(this).parent().append('<div class="unit"><span>'+newNum+'</span><span >(千亿)</span></div>');
}
})
if(!settings.ISnotchange){
//鼠标离开事件,显示右侧单位
Element.bind('change',function(){
var thisNum = $(this).val();
//$('.unit',settings.this$).remove();
$(this).parent().css('position','relative');
if(99<thisNum&&thisNum<=999){
$(this).parent().append('<div class="unit"><span >(百)</span></div>');
}else if(999<thisNum&&thisNum<=9999){
$(this).parent().append('<div class="unit"><span >(千)</span></div>');
}else if(9999<thisNum&&thisNum<=99999){
$(this).parent().append('<div class="unit"><span >(万)</span></div>');
}else if(99999<thisNum&&thisNum<=999999){
$(this).parent().append('<div class="unit"><span >(十万)</span></div>');
}else if(999999<thisNum&&thisNum<=9999999){
$(this).parent().append('<div class="unit"><span >(百万)</span></div>');
}else if(999999<thisNum&&thisNum<=99999999){
$(this).parent().append('<div class="unit"><span >(千万)</span></div>');
}else if(99999999<thisNum&&thisNum<=999999999){
$(this).parent().append('<div class="unit"><span >(亿)</span></div>');
}else if(999999999<thisNum&&thisNum<=9999999999){
$(this).parent().append('<div class="unit"><span >(十亿)</span></div>');
}else if(9999999999<thisNum&&thisNum<=99999999999){
$(this).parent().append('<div class="unit"><span >(百亿)</span></div>');
}else if(99999999999<thisNum&&thisNum<=999999999999){
$(this).parent().append('<div class="unit"><span >(千亿)</span></div>');
}else{
$(this).parent().find('.unit').remove();
}
})
}
},
//如果有多个触发对象,返回当前激活页面的对象
returnThis$: function (clickElement) {
settings.this$ = $(clickElement);
},
/*
/*
格式化数据,小数部分不做处理,对整数部分进行千分位格式化的处理,如果有符号,正常保留
*/
formatCurrency:function(num) {
if(num)
{
//将num中的$,去掉,将num变成一个纯粹的数据格式字符串
num = num.toString().replace(/\$|\,/g,'');
//如果num不是数字,则将num置0,并返回
if(''==num || isNaN(num)){return 'Not a Number ! ';}
//如果num是负数,则获取她的符号
var sign = num.indexOf("-")> 0 ? '-' : '';
//如果存在小数点,则获取数字的小数部分
var cents = num.indexOf(".")> 0 ? num.substr(num.indexOf(".")) : '';
cents = cents.length>1 ? cents : '' ;//注意:这里如果是使用change方法不断的调用,小数是输入不了的
//获取数字的整数数部分
num = num.indexOf(".")>0 ? num.substring(0,(num.indexOf("."))) : num ;
//如果没有小数点,整数部分不能以0开头
if('' == cents){ if(num.length>1 && '0' == num.substr(0,1)){
num = num.replace(/\b(0+)/gi,"");
}}
//如果有小数点,且整数的部分的长度大于1,则整数部分不能以0开头
else{if(num.length>1 && '0' == num.substr(0,1)){
num = num.replace(/\b(0+)/gi,"");
}}
//针对整数部分进行格式化处理,这是此方法的核心,也是稍难理解的一个地方,逆向的来思考或者采用简单的事例来实现就容易多了
/*
也可以这样想象,现在有一串数字字符串在你面前,如果让你给他家千分位的逗号的话,你是怎么来思考和操作的?
字符串长度为0/1/2/3时都不用添加
字符串长度大于3的时候,从右往左数,有三位字符就加一个逗号,然后继续往前数,直到不到往前数少于三位字符为止
*/
for (var i = 0; i < Math.floor((num.length-(1+i))/3); i++)
{
num = num.substring(0,num.length-(4*i+3))+','+num.substring(num.length-(4*i+3));
}
//将数据(符号、整数部分、小数部分)整体组合返回
return (sign + num + cents);
}
}
};
settings.init(this);
return this;
};
})(jQuery);
/依赖JQ与layer,
//html 只需要在input输入框上面加上unit="true"属性就OK啦