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

这次距离上一个组件《[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. sys.dm_db_wait_stats

    sys.dm_db_wait_stats 返回在操作期间执行的线程所遇到的所有等待的相关信息. 可以使用此聚合视图来诊断 Azure SQL Database 以及特定查询和批处理的性能问题. 执行查 ...

  2. 深入理解CSS中的长度单位

    前面的话 本文分为绝对长度单位和相对长度单位来介绍CSS中的长度单位的主要知识 绝对长度单位 绝对长度单位代表一个物理测量 像素px(pixels) 在web上,像素px是典型的度量单位,很多其他长度 ...

  3. pojBuy Tickets2828线段树或者树状数组(队列中倒序插队)

    这题开始的思路就是模拟:就像数组中插点一样,每一个想买票的人都想往前插队! 但是这样的话肯定TLE, 看了别人的思路之后才恍然大悟! 正解: 将开始的正序插入,变成倒序插入,这样的话,想一想:第 i ...

  4. 【AngularJS】—— 12 独立作用域

    前面通过视频学习了解了指令的概念,这里学习一下指令中的作用域的相关内容. 通过独立作用域的不同绑定,可以实现更具适应性的自定义标签.借由不同的绑定规则绑定属性,从而定义出符合更多应用场景的标签. 本篇 ...

  5. ASP.NET 程序提交表单数据中带有html标签不能提交或者提交报错问题

    今天在公司做另外的一个项目,又奇葩的遇到一个问题. 在本地自己电脑上怎么测试都是正常的.但是先上服务器就出问题: 用富文本编辑器上传一篇文章,始终报错,又没提示具体什么错误,也没说代码错误,点击提交按 ...

  6. 实现jquery.ajax及原生的XMLHttpRequest调用WCF服务的方法

    废话不多说,直接讲解实现步骤 一.首先我们需定义支持WEB HTTP方法调用的WCF服务契约及实现服务契约类(重点关注各attribute),代码如下: //IAddService.cs namesp ...

  7. 深度浅出immutable.js

    这篇文章将讲述immutable.js的基本语法和用法. 1.fromJs()  Deeply converts plain JS objects and arrays to Immutable Ma ...

  8. 如何解读SQL Server日志(2/3)

    接下来说说返回的RowLogo Content列,例子中返回了三个列.这些列包含了数据操作的"有效工作负载(Playload)"记录.根据不同操作类型有效负载的内容也是不同的,但是 ...

  9. 理解TCP/IP三次握手与四次挥手的正确姿势

    背景 注:以下情节纯属虚构,我并没有女朋友==. 和女朋友异地恋一年多,为了保持感情我提议每天晚上视频聊天一次. 从好上开始,到现在,一年多也算坚持下来了. 问题 有时候聊天的过程中,我的网络或者她的 ...

  10. 设置与获取Cookie

    自己编写的一个Cookie设置与获取函数,大家有什么感觉需要改进的地方,请告知与我,我一定虚心接受. JavaScript - Code: function setCookie(name,value, ...