简单的千位符插件

 

(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啦