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

这次距离上一个组件《[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. Android入门(八)广播

    原文链接:http://www.orlion.ga/572/ 一.广播机制 Android中的每个应用程序都可以对自己感兴趣的广播进行注册,这样该程序就只会接收到自己所关心的广播内容,这些广 播可能是 ...

  2. Android中常用控件及属性

    在之前的博客为大家带来了很多关于Android和jsp的介绍,本篇将为大家带来,关于Andriod中常用控件及属性的使用方法,目的方便大家遗忘时,及时复习参考.好了废话不多讲,现在开始我们本篇内容的介 ...

  3. List和Dictionary泛型类查找效率浅析

    List和Dictionary泛型类查找效率存在巨大差异,前段时间亲历了一次.事情的背景是开发一个匹配程序,将书籍(BookID)推荐给网友(UserID),生成今日推荐数据时,有条规则是同一书籍七日 ...

  4. Yii2的深入学习--继承关系

    想要了解 Yii2 的话,一定要对 Yii2 中相关类的继承关系有所了解.由于暂时读的代码有限,下面的图中只列出了部分继承关系,之后回跟着源码阅读的越来越多而增加 由上图可以看到 Yii2 中大多数类 ...

  5. SQL常用数据库结构升级语句

    修改视图 --SQL Server 2005 GO IF EXISTS (SELECT * FROM sys.views WHERE object_id = OBJECT_ID(N'[dbo].[e_ ...

  6. 搭建CnetOS6.5x64最小系统及在线yum源的配置

    CentOS系统作为红帽系列的一款linux系统,因为其免费.开源,在中小企业中得到了广泛应用,生产上为了更好的利用资源,都采用最小系统安装,因为一个图形界面都会占去系统资源的30%到40%,生产上一 ...

  7. ADO.NET基础--组成部分

    第一部分:数据提供程序,在命令空间:System.Data.SqlClient下: Connection--连接数据库的通道 Command----命令执行对象 DataReader--数据读取器 D ...

  8. 模拟 --- hdu 12878 : Fun With Fractions

    Fun With Fractions Time Limit: 1000ms, Special Time Limit:2500ms, Memory Limit:65536KB Total submit ...

  9. LeetCode - Populating Next Right Pointers in Each Node

    题目: Given a binary tree struct TreeLinkNode { TreeLinkNode *left; TreeLinkNode *right; TreeLinkNode ...

  10. Handler "BlockViewHandler" has a bad module "ManagedPipelineHandler" in its module list

    当你的ASP.NET MVC项跑在IIS时,出现如标题Handler "BlockViewHandler" has a bad module "ManagedPipeli ...