比如輸入: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;