数字或金额千分位格式化组件

这次距离上一个组件《[js开源组件开发]table表格组件》时隔了一个月,由于最近的项目比较坑,刚挖完坑,所以来总结性提出来几个组件弥补这次的空缺,首先是金额和数字的千分位和小数点控制的组件,它的作用主要是在输入框时限制输入的内容为数字。也可以用于普通标签的数字格式化,效果如下图:

demo演示地址请点击 http://www.lovewebgames.com/jsmodule/format-number.html

源码github托管地址请点击https://github.com/tianxiangbing/format-number

演示代码

<script src="../src/jquery-1.11.2.js"></script>
<script src="../src/format-number.js"></script>
<div>整数:<input type="text" data-type="int" data-name="int"/></div>
<script>
var n1 = new FormatNumber();
n1.init({trigger:$('[data-type="int"]'),decimal:});
</script>
<div>整数可为负:<input type="text" data-type="int2" data-name="int"/></div>
<script>
var n2 = new FormatNumber();
n2.init({trigger:$('[data-type="int2"]'),decimal:,minus:true});
</script>
<div>两位小数(默认):<input type="text" class="has-minus" value="1112212.221" data-type="number" data-name="as"/></div>
<script>
var n3 = new FormatNumber();
n3.init({trigger:$('[data-type="number"]')});
</script>
<div>3位小数并且可为负数:<input type="text" data-name="pc" data-type="pecent"/></div>
<script>
var n4 = new FormatNumber();
n4.init({trigger:$('[data-type="pecent"]'),decimal:,minus:true});
</script>
<div>4位小数并且不可为负数:<input type="text" data-name="pc" data-type="pecent2"/></div>
<script>
var n5 = new FormatNumber();
n5.init({trigger:$('[data-type="pecent2"]'),decimal:});
</script>
<div>标签:123123123.13211=<span id="sp_number">123123123.13211</span></div>
<script>
$('#sp_number').FormatNumber({decimal:})
</script>

API

属性

trigger:dom|string

触发器元素,可为input或标签元素(span/div)

parent :dom|string

委托对象,由于本插件对事件的绑定都以委托为主,如不传,默认代理到body上

decimal: int

小数位数,默认2位

  

minus: bool

是否支持负数,默认为false不支持

[js开源组件开发]数字或金额千分位格式化组件的更多相关文章

  1. Grid数字或金额千分位或保留两位小数

    formatter: 'number', formatoptions: { thousandsSeparator: "", decimalPlaces: 2 }

  2. js jquery版本的 金额千分位转换函数(非正则,效率极高)

    没想到js里面没有 金额千分位格式化的处理函数(例:1,234.01 这样的格式),网上搜了一圈,都是使用正则的方式处理的.正则的效率不敢恭维啊,又耗费资源速度又慢(虽然处理起来会直观一些). 因此专 ...

  3. Js笔试题之千分位格式化

    用js实现如下功能,将给定的数字转化成千分位的格式,如把“10000”转化成“10,000”,并考虑到性能方面的因素. 一.首先想到的办法,将数字转换为字符串(toString())再打散成数组(sp ...

  4. input输入框数字转带千分位的字符串

    数字转带千分位的字符串 思路 先获取要转换的数字,对其进行分割 小数部分具体需要保留多少位,具体处理 整数部分用正则做替换 将小数部分和整数部分合计 代码 注意: 本文是基于 jQuery 写的,稍稍 ...

  5. JS - 对金额数字实现千分位格式化处理

    添加千分位处理: function fmoney(s, n) { n = n > 0 && n < = 20 ? n : 2; s = parseFloat((s + &q ...

  6. 从千分位格式化谈JS性能优化

    所谓的千分位形式,即从个位数起,每三位之间加一个逗号.例如“10,000”.针对这个需求,我起初写了这样一个函数: // 方法一function toThousands(num) {var resul ...

  7. JavaScript数值千分位格式化的方法和性能

    瞎掰的前提 前端嘛,经常处理数值和时间. 所以数值和时间的格式化少不了. 最近一直在面试前端, 就出了一个如何给数值添加千分位的面试题. 至于答案,我一直都有一种标准, 一是基于你现有的知识可以实现, ...

  8. js数字格式化为千分位

    方法1: 浏览器自带的一个方法 const num=12345.6789 num.toLocaleString();=>"12,345.679" 方法2: 正则匹配 func ...

  9. 请实现一个js脚本,要求做到将数字转化为千分位表示如:1234567转化为1,234,567

    //法一 function parseNum(num){ var list = new String(num).split('').reverse(); for(var i = 0; i < l ...

随机推荐

  1. 深入理解PHP内核(十四)类的成员变量及方法

    原文链接:http://www.orlion.ga/1237/ 类的成员变量在PHP中本质是一个变量,只是这些变量都归属于某个类,并且给这些变量是有访问控制的. 类的成员方法在PHP中本质是一个函数, ...

  2. Cwinux源码解析(五)

      Cwinux源码解析(五)

  3. Java多线程系列--“基础篇”02之 常用的实现多线程的两种方式

    概要 本章,我们学习“常用的实现多线程的2种方式”:Thread 和 Runnable.之所以说是常用的,是因为通过还可以通过java.util.concurrent包中的线程池来实现多线程.关于线程 ...

  4. PHP面试出场率较高的题目<转载>

    --------------------PHP部分--------------------- PHP中几个输出函数echo,print(),print_r(),sprintf(),var_dump() ...

  5. 漫谈可视化Prefuse(三)---Prefuse API数据结构阅读有感

    前篇回顾:上篇<漫谈可视化Prefuse(二)---一分钟学会Prefuse>主要通过一个Prefuse的具体实例了解了构建一个Prefuse application的具体步骤.一个Pre ...

  6. [java] 注释以及javadoc使用简介-汇率换算器的实现-插曲3

    [java] 注释以及javadoc使用简介-汇率换算器的实现-插曲3 // */ // ]]>   [java] 注释以及javadoc使用简介-汇率换算器的实现-插曲3 Table of C ...

  7. JAVA 设计模式 外观模式

    用途 外观模式 (Facade) 为子系统中的一组接口提供一个一致的界面,此模式定义了一个高层接口,这个接口使得这一子系统更加容易使用. 外观模式是一种结构型模式. 结构

  8. Elasticsearch集群配置以及REST API使用

    ES安装与启动 在官网下载压缩包,解压后直接运行bin目录下的.bat文件即可.下载地址戳这里. ES配置集群 Elasticsearch配置集群很简单,只要配置一个集群的 名称 ,ES就会自动寻找并 ...

  9. Elasticsearch增删改查 之 —— mget多文档查询

    之前说过了针对单一文档的增删改查,基本也算是达到了一个基本数据库的功能.本篇主要描述的是多文档的查询,通过这个查询语法,可以根据多个文档的查询条件,返回多个文档集合. 更多内容可以参考我整理的ELK文 ...

  10. .Net魔法堂:开启IIS的WebGarden、WebFarm和StateServer之旅

    前言 公司系统虽然配置有1台NLB后拖4台App Server最后搭一台强劲无比的DB Server,但每天下午4点左右总被投诉系统慢,报表下载不了等问题.究其原因,原来NLB采用锁定sessionI ...