[英]format string decimal and thousands separator javascript
我用jQuery做了兩個簡單的計數器。 現在，我嘗試使這些計數器出現。
我的第一個計數器現在看起來像“ 23000”。 但是為了獲得更好的概述，我想添加一個點。 我已經嘗試過將“ 23.000”假裝成一個十進制數字：用3位數字最多計數23個，但是計數器以“ 0.000”開頭，完成后不顯示“ 000”。
第二：我的計數器看起來像“ 15.06”，我想用逗號來更改點，例如：“ 15,06”
有人能幫我嗎？
jQuery(document).ready(function () { function counter01() { $('#01').each(function () { var start = $(this).data("start") var speed = $(this).data("speed") $("#01").prop('end', start).animate({ end: $(this).data("end") }, { duration: speed, step: function (now) { $(this).text(Math.round(now * 1) / 1); } }); }); } counter01(); function counter02() { $('#02').each(function () { var start = $(this).data("start") var speed = $(this).data("speed") $("#02").prop('end', start).animate({ end: $(this).data("end") }, { duration: speed, step: function (now) { $(this).text(Math.round(now * 100) / 100); } }); }); } counter02(); function counter03() { $('#03').each(function () { var start = $(this).data("start") var speed = $(this).data("speed") $("#03").prop('end', start).animate({ end: $(this).data("end") }, { duration: speed, step: function (now) { $(this).text(Math.round(now * 1000) / 1000); } }); }); } counter03(); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <body> <div class="wrapper" style=" width: 30%; margin: 10px auto;float:left;"> <p style="font-size: 2em;text-align: center;line-height: 1.23em;margin: 5px;">How it looks right now</p> <h3 id="01" class="zaehler" data-start="0" data-end="23000" data-speed="5000" style="font-size: 3em;line-height: 1em;color: red;text-align: center;margin: 5px;">23000</h3> <h3 id="03" class="zaehler" data-start="0" data-end="23.000" data-speed="5000" style="font-size: 3em;line-height: 1em;color: red;text-align: center;margin: 5px;">23.000</h3> <p> </p> <p style="font-size: 2em;text-align: center;line-height: 1.23em;margin: 5px;">How it should look</p> <h3 class="" data-start="0" data-end="23000" data-speed="3000" style="font-size: 3em;line-height: 1em;color: green;text-align: center;margin: 5px;">23.000</h3> </div> <div class="wrapper" style=" width: 30%; margin: 10px auto;float:left;"> <p style="font-size: 2em;text-align: center;line-height: 1.23em;margin: 5px;">How it looks right now</p> <h3 id="02" class="zaehler" data-start="0" data-end="15.06" data-speed="2000" style="font-size: 3em;line-height: 1em;color: red;text-align: center;margin: 5px;">15,06</h3> <p> </p> <p style="font-size: 2em;text-align: center;line-height: 1.23em;margin: 5px;">How it should look</p> <h3 class="" data-start="0" data-end="23000" data-speed="3000" style="font-size: 3em;line-height: 1em;color: green;text-align: center;margin: 5px;">15,06</h3> </div> </body>
這是修改后的number_format()函數，可直接為您進行轉換：
function number_format(number, decimals, dec_point) {
// Strip all characters but numerical ones.
number = (number + '').replace(/[^0-9+\-Ee.]/g, '');
var n = !isFinite(+number) ? 0 : +number,
prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
sep = '.',
dec = (typeof dec_point === 'undefined') ? '.' : dec_point,
s = '',
toFixedFix = function(n, prec) {
var k = Math.pow(10, prec);
return '' + Math.round(n * k) / k;
};
// Fix for IE parseFloat(0.55).toFixed(0) = 0;
s = (prec ? toFixedFix(n, prec) : '' + Math.round(n)).split('.');
if (s[0].length > 3) {
s[0] = s[0].replace(/\B(?=(?:\d{3})+(?!\d))/g, sep);
}
if ((s[1] || '').length < prec) {
s[1] = s[1] || '';
s[1] += new Array(prec - s[1].length + 1).join('0');
}
return s.join(dec);
}
您可以在這里看到它的工作原理：
function number_format(number, decimals, dec_point) { // Strip all characters but numerical ones. number = (number + '').replace(/[^0-9+\\-Ee.]/g, ''); var n = !isFinite(+number) ? 0 : +number, prec = !isFinite(+decimals) ? 0 : Math.abs(decimals), sep = '.', dec = (typeof dec_point === 'undefined') ? '.' : dec_point, s = '', toFixedFix = function(n, prec) { var k = Math.pow(10, prec); return '' + Math.round(n * k) / k; }; // Fix for IE parseFloat(0.55).toFixed(0) = 0; s = (prec ? toFixedFix(n, prec) : '' + Math.round(n)).split('.'); if (s[0].length > 3) { s[0] = s[0].replace(/\\B(?=(?:\\d{3})+(?!\\d))/g, sep); } if ((s[1] || '').length < prec) { s[1] = s[1] || ''; s[1] += new Array(prec - s[1].length + 1).join('0'); } return s.join(dec); } jQuery(document).ready(function() { function counter01() { $('#01').each(function() { var start = $(this).data("start") var speed = $(this).data("speed") $("#01").prop('end', start).animate({ end: $(this).data("end") }, { duration: speed, step: function(now) { $(this).text(number_format(Math.round(now * 1) / 1), 0, '', '.'); } }); }); } counter01(); function counter02() { $('#02').each(function() { var start = $(this).data("start") var speed = $(this).data("speed") $("#02").prop('end', start).animate({ end: $(this).data("end") }, { duration: speed, step: function(now) { $(this).text(number_format(Math.round(now * 100) / 100, 2, ',', '.')); } }); }); } counter02(); function counter03() { $('#03').each(function() { var start = $(this).data("start") var speed = $(this).data("speed") $("#03").prop('end', start).animate({ end: $(this).data("end") }, { duration: speed, step: function(now) { $(this).text(Math.round(now * 1000) / 1000); } }); }); } counter03(); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <body> <div class="wrapper" style=" width: 30%; margin: 10px auto;float:left;"> <p style="font-size: 2em;text-align: center;line-height: 1.23em;margin: 5px;">How it looks right now</p> <h3 id="01" class="zaehler" data-start="0" data-end="23000" data-speed="5000" style="font-size: 3em;line-height: 1em;color: red;text-align: center;margin: 5px;">23000</h3> <h3 id="03" class="zaehler" data-start="0" data-end="23.000" data-speed="5000" style="font-size: 3em;line-height: 1em;color: red;text-align: center;margin: 5px;">23.000</h3> <p> </p> <p style="font-size: 2em;text-align: center;line-height: 1.23em;margin: 5px;">How it should look</p> <h3 class="" data-start="0" data-end="23000" data-speed="3000" style="font-size: 3em;line-height: 1em;color: green;text-align: center;margin: 5px;">23.000</h3> </div> <div class="wrapper" style=" width: 30%; margin: 10px auto;float:left;"> <p style="font-size: 2em;text-align: center;line-height: 1.23em;margin: 5px;">How it looks right now</p> <h3 id="02" class="zaehler" data-start="0" data-end="15.06" data-speed="2000" style="font-size: 3em;line-height: 1em;color: red;text-align: center;margin: 5px;">15,06</h3> <p> </p> <p style="font-size: 2em;text-align: center;line-height: 1.23em;margin: 5px;">How it should look</p> <h3 class="" data-start="0" data-end="23000" data-speed="3000" style="font-size: 3em;line-height: 1em;color: green;text-align: center;margin: 5px;">15,06</h3> </div> </body>
Javascript從NumberFormat獲取小數和千位分隔符
[英]Javascript get decimal and thousands separator from NumberFormat
如何使用javascript從字符串中刪除千位分隔符和小數
[英]How to remove thousand separator and decimal from string using javascript
將帶有點或逗號作為十進制分隔符的字符串轉換為 JavaScript 中的數字
[英]Convert String with Dot or Comma as decimal separator to number in JavaScript
如何確定瀏覽器中當前語言環境的小數和千位分隔符？
[英]How do I determine the decimal and thousands separator for the current locale in the browser?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.