时间:2019-09-02
编辑:网站制作公司
5276
0
虽然在网络上我们用数字来显示未读消息,评论,喜欢,微博,和其他一些项目计数,当谈到格式化数字用于银行或金融机构,显示数量可能需要一些变通方法。
如果你需要数字出现在 货币格式或用逗号分割或小数点 ,那么你会喜欢使用 Accounting.jsJavaScript库,资金和货币格式。
成都高端网站建设在本文中,我们将向您展示它的一些基本功能,然后我们将利用它在一个实际的例子来展示它是如何工作的。 让我们开始吧。
会计。 js是一个JavaScript库,没有依赖性。 你不需要jQuery使用它; 它可以运行在它自己的。 下载源代码 Github库 ,把它放在一个适当的目录,链接文件的HTML文档。
1 | <脚本 src=“js / accounting.js”> < /脚本> |
会计。 js提供了一些方法来格式化数字。 第一个,我们要看一看 formatMoney () 。 这种方法是将数字转化为货币的基本功能。 使用它,每个方法intialized 会计 然后其次是方法的名字。 例如:
1 | accounting.formatMoney (2000000); |
在默认设置,会计。 js将显示上面的例子与美元符号,每三个数字用逗号分开,并使用小数点分隔美元和美分。
1 | 2000000美元 |
一些国家使用不同的分隔符每三位数(数以千计)和小数。 会计。 js完全localisable。 如果默认输出不是您的本地货币的方式显示出来,你可以做出改变 选项 。
下面,我们以德国为例,它使用点千和逗号小数分隔符:
1 2 3. 4 5 | 会计。 formatMoney (2000000, { 符号:“€”, 千:".", 小数:",", }); |
这将输出:
1 | €2.000.000,00 |
如果你想格式数量没有货币符号,您可以使用 formatNumber () 方法。
货币可能小数。 但我们通常一轮上升或下降到最近的值使记住简单的数量或猜测。 在Accounting.js ,我们可以用 .toFixed () 这样做。 这个例子显示了如何删除小数位数以及圆他们最近的十:
1 | accounting.toFixed (102.58, 0); |
的输出是:
1 | 103 |
在本节中,我们将使用上述功能 建立一个货币转换器 。 我们不会建立一个广泛的转换器,只是一个简单的例子来说明会计。 js。
在练习中,我们将把美元转换成2货币即韩元(韩元)和日元(日元)。
让我们布局文档结构如下:
1 2 3. 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <div 类=“货币期权”> <div 类=“行”> <h4 类=“标题”> < /h4> <选择 id=“input-currency” 禁用> <选项 价值=“美元” data-symbol=“$” 选择> < /美元选项> 选择> <跨度 id=“input-symbol”> < /美元跨度> <输入 id=“输入数” 类=“输入” 类型=“数量” 最小值=“0”> div> <div 类=“行”> <h4 类=“标题”> < /h4> <选择 id=“output-currency”> <选项 价值=“韩元” data-symbol=“₩” 选择> < /韩圆选项> <选项 价值=“日元” data-symbol=“¥”> < /日元选项> 选择> <跨度 id=“产量号码”> < /₩0跨度> div> div> |
正如上面我们可以看到的,我们有两排 div 。 第一行包含一个 下拉 选项设置为美元,和残疾人,所以用户无法选择其他选项。 这一行还包含一个 数量 输入字段类型,我们将进入兑换美元的数量。
在第二行中,我们有一个下拉选项,包含两个货币选项:韩圆和日元。 每个选项都有一个 价值 属性,data-symbol 属性来存储货币符号。 我们使用一个 跨度 元素输出转换后的结果。
在撰写本文时1美元等于KRW1077.80 JPY102.24。 我们可以在实时检索这些汇率值 开放汇率 。 但是现在,我们只是把一个变量的值 .toFixed () 方法来围捕号码:
1 2 | var jpy = accounting.toFixed (102.24, 0), 韩元= accounting.toFixed (1077.80, 0), |
接下来,我们成都高端网站建设将创建一个新的功能的价值 价值 和 data-symbol 下拉选项的属性。 然后存储在一个值 数组 。
1 2 3. 4 5 6 7 8 | var getCurrency =函数(elem) { var curAbbr = elem.find(美元”:选择“).val (), curSign = elem.find(美元”:选择“). data (“象征”); 返回 { “象征” :$ curSign “价值” :$ curAbbr }; }; |
我们想要转换 发生在真正的时间 。 这意味着它将发生在用户输入字段中输入或货币之间切换。
为了实现这一想法,我们将分配 # output-currency 以及 #输入数 有三个即JavaScript事件 改变 , 按键弹起 , keydown 这种方式:
1 2 3. | $(“# output-currency, #输入数”)内(“改变keyup keydown”,函数(){ / /的东西 } |
然后,我们从下拉选项,将检索值 # output-currency ,通过使用 getCurrency 我们上面创建函数。 即是分开在两个不同的变量的值 美元的符号 和 美元瓦尔 ,如下所示。
1 2 3. | var 美元汇率= getCurrency ($ (“# output-currency”)), 符号=货币(美元“象征”), val =货币(美元“价值”]; |
我们还需要输入字段的数量和当前的汇率值中设置 日元 和 韩元 变量; 使用条件函数我们可以决定哪些货币利率(韩元或日元)使用。
1 2 3. | / /得到数量 var mulitplyNum = (val美元= =“日元”)? 日元:韩元; var 演示了getInput = $(美元)#输入数的).val (); |
有以上数量,我们可以计算出结果。
1 | var 演示了getInput * mulitplyNum getTotal =美元(美元); |
但是,在我们输出之前,让我们把它使用在一个适当的格式 .formatMoney () 方法:
1 2 3. 4 5 | var 数量=会计。 formatMoney (getTotal美元,{ 象征:$符号, 精度:0, 千:',' }); |
最后,我们输出最终格式化数字。
1 | $(“#产量号码”)。text(数字); |
做完了。 你可以看到下面的操作演示。
纯数字货币格式不是和你可能认为一样难。 使用会计。 js,这件事将变得非常容易。 我们还展示了如何实现函数来构建一个简单的货币转换器工作。 给它一个去。
3
s后返回登录3
s后返回登录