zoukankan      html  css  js  c++  java
  • input框输入金额显示逗号分隔,显示百分位

    比如输入:1000000,则显示为1,000,000(或者是保留3位小数:1,000,000.000)

    知识点:

    1)JavaScript parseFloat() 函数:

    定义:parseFloat() 函数可解析一个字符串,并返回一个浮点数

    语法:parseFloat(string)

      a)parseFloat 将它的字符串参数解析成为浮点数并返回;

      b)如果在解析过程中遇到了正负号(+ 或 -)、数字 (0-9)、小数点,或者科学记数法中的指数(e 或 E)以外

    的字符,则它会忽略该字符以及之后的所有字符,返回当前已经解析到的浮点数;

      c)参数字符串首位的空白符会被忽略;

    注意:如果参数字符串的第一个字符不能被解析成为数字,则 parseFloat 返回 NaN。

    提示:您可以通过调用 isNaN 函数来判断 parseFloat 的返回结果是否是 NaN。如果让 NaN 作为了任意数学运算的操作数,则运算结果必定也是 NaN。

    复制代码
    1 parseFloat("10")                10
    2 parseFloat("10.00")             10
    3 parseFloat("10.33")             10.33
    4 parseFloat("34 45 66")          34
    5 parseFloat("   60   ")          60
    6 parseFloat("40 years")          40
    7 isNaN(parseFloat("40 years"))   false
    8 parseFloat("He was 40")         NaN
    9 isNaN(parseFloat("He was 40"))  true
    复制代码

    2)JavaScript toFixed() 方法:

    定义:toFixed() 方法可把 Number 四舍五入为指定小数位数的数字。

    语法:NumberObject.toFixed(num),num参数必需,规定小数的位数,是 0 ~ 20 之间的值,包括 0 和 20,有些实

    现可以支持更大的数值范围。如果省略了该参数,将用 0 代替。

    如下:把数字舍入为仅有一位小数的数字:

    1 var num =13.36;
    2 alert(num.toFixed(1));    13.4

    3)JavaScript isNaN() 函数:

    定义:isNaN() 函数用于检查其参数是否是非数字值。

    语法:isNaN(x),如果 x 是特殊的非数字值 NaN(或者能被转换为这样的值),返回的值就是 true。如果 x 是其他值,则返回 false,前提条件:x不能为空。

    提示:isNaN() 函数通常用于检测 parseFloat() 和 parseInt() 的结果,以判断它们表示的是否是合法的数字。当然也可以用 isNaN() 函数来检测算数错误,比如用 0 作除数的情况

    4)JavaScript reverse() 方法:

    定义:reverse() 方法用于颠倒数组中元素的顺序

    语法:array.reverse()

    5)JavaScript split() 方法:

    定义:split() 方法用于把一个字符串分割成字符串数组

    语法:stringObject.split(separator,howmany)

      参数separator:必需。字符串或正则表达式,从该参数指定的地方分割 stringObject;

      参数howmany:可选。该参数可指定返回的数组的最大长度。如果设置了该参数,返回的子串不会多于这个参数指定的数组。如果没有设置该参数,整个字符串都会被分割,不考虑它的长度;

    注释:如果把空字符串 ("") 用作 separator,那么 stringObject 中的每个字符之间都会被分割。

    注释:String.split() 执行的操作与 Array.join 执行的操作是相反的

    宝典在这

    6)JavaScript join() 方法:

    定义:join() 方法用于把数组中的所有元素放入一个字符串

    语法:arrayObject.join(separator)

      参数separator:可选。指定要使用的分隔符。如果省略该参数,则使用逗号作为分隔符。

    提示:join("")则意味将数组拼接成字符串

    需求:

    input框输入金额,要求按千分位显示并四舍五入保留3位小数,其中要求只能输入大于的0的数字,小数位不作限制

    分析:

    1、四舍五入且保留指定小数位:toFixed() 方法

    2、输入大于0的数字且输入时小数位不做限制:正则表达式校验

      1)正整数部分(>0整数):[1-9][0-9]*  表示以1-9任意一个数开头,*表示出现0次或多次;

      2)含小数部分(注意不能是0.0000...):[0].[0-9]{0,2}[1-9]d*|[1-9][0-9]*.d*  表示整数位0的小数保留3位四舍五入后不能是0.000,整数不为0的都可以

    3、整数部分加千分位:

      1)先把经过toFixed()处理后,利用split(".")将整数和小数分开并分包存储;

       2)整数部分加千分位:可以从低位→高位,每隔3位插入逗号,还有注意最高位不能以逗号开头;

        2.1)利用split("")将整数部分切割成数组;

        2.2)利用reverse()将切割后数组颠倒;

        2.3)遍历数组:数组下标+1和3求余(数组下标从0开始)来重新拼接字符串或者push给新数组;

        2.4)再利用reverse()颠倒新数组,利用join("")拼接;

    4、字符串拼接:整数部分加千分位+"."+小数部分;

    <input class="base-form-input " id="mny" type="text" onchange="numChange(this.value)" value="<fmt:formatNumber type='number' value='' pattern="#,##0.000" maxFractionDigits='3'/>">

    javaScript脚本(红色部分需要根据情况修改)

    复制代码
    //光标离开输入的金额四舍五入并保留3位小数
        $("#mny").blur(function(){//输入obj=123456.7890
            var obj = this.value;
            var mnyReg = /^([1-9][0-9]*|(([0].[0-9]{0,2}[1-9]d*|[1-9][0-9]*.d*)))$/;//根据需求修改
            if(!(mnyReg.test(obj))){
                  layer.tips("请输入正确的资金", $(this).attr("id"),{time:1000});
                  return;
              }
            var n = 3; //保留得小数位
            obj = parseFloat(obj).toFixed(n); //obj=123456.789
            var left = obj.split(".")[0].split("").reverse();//left = ["6","5","4","3","2","1"]
            var right = obj.split(".")[1]; //right = "789"
            var total = new Array(); 
            for (i = 0; i < left.length; i++) { 
                total.push(left[i]);
                if((i + 1) % 3 == 0 && (i + 1) != left.length){
                    total.push(",");
                }
            } //total = ["6","5","4",",","3","2","1"]
            $("#mny").val(total.reverse().join("") + "." + right); 
        })
    复制代码
    复制代码
    //光标进入,去除金额千分位,并去除小数后面多余的0
    $("#mny").focus(function(){
            var oldMny = this.value.replace(/,/g, '');
            if(oldMny.indexOf(".")>0){
                oldMny = oldMny.replace(/0+?$/,"");//去除尾部多余的0
                oldMny = oldMny.replace(/[.]$/,"");//如果最后一位是.则去掉
            }
            this.value = oldMny;
        })
    复制代码

    取值进行保存操作的时候,要把千分位去掉:可以用全局匹配替换逗号

    var reg_mny = $("#mny").val().trim().replace(/,/g, '');

    如果想光标再次进入的时候显示原先输入的值,可以再方法外面定义一个变量var oldMny,存储输入的金额:

    当光标进入时候,取oldMny赋值给input(最原始的未四舍五入的值);光标离开时候,则把input值存到oldMny;

  • 相关阅读:
    解决Mac笔记本电脑自带录屏软件没有声音问题
    pip安装包后Import的时候提示找不到的解决方案
    Photoshop怎么给图片添加简介信息或者版权信息
    [2021/08/06]Ubuntu20 安装指定小版本Mysql(本文示例mysql8.0.18)
    Springboot2.3.5 实现JWT授权验证并针对不同用户实现多个拦截器
    搭建集群步骤注意事项
    docker服务程序网络排查
    网络分层协议集合分析
    括号串
    抢救实验数据
  • 原文地址:https://www.cnblogs.com/ketoli/p/13328517.html
Copyright © 2011-2022 走看看