javascript - 脚本文件中的千位分隔符

Question

这是我在页面上呈现自动递增计数器的代码:

<script>
  document.addEventListener("DOMContentLoaded", function(event) {
    var START_DATE_1 = new Date("July 18, 2016 10:30:00"); // put in the starting date here
    var INTERVAL_1 = 3; // in seconds
    var INCREMENT_1 = 1; // increase per tick
    var START_VALUE_1 = 0; // initial value when it's the start date
    var count_1 = 0;

    var msInterval_1 = INTERVAL_1 * 1000;
    var now_1 = new Date();
    count_1 = parseInt((now_1 - START_DATE_1)/msInterval_1) * INCREMENT_1 + START_VALUE_1;
    document.getElementById('counter_1').innerHTML = count_1;
    setInterval(function() {
      count_1 += INCREMENT_1;
      document.getElementById('counter_1').innerHTML = count_1;
    }, msInterval_1);
  });
</script>

我想用千位分隔符呈现计数器的数字(例如:2.000.000)

我应该如何编辑脚本？

提前致谢。

Answer 1

在现代浏览器上，您可以使用 Intl API

The Intl object is the namespace for the ECMAScript Internationalization API, which provides language sensitive string comparison, number formatting, and date and time formatting. The constructors for Collator, NumberFormat, and DateTimeFormat objects are properties of the Intl object. This page documents these properties as well as functionality common to the internationalization constructors and other language sensitive functions.

我在下面的示例中使用意大利语，只是根据您的姓名，它使用您所需的格式。

var START_DATE_1 = new Date('July 18, 2016 10:30:00').getTime(); // put in the starting date here
var INTERVAL_1 = 3; // in seconds
var INCREMENT_1 = 1; // increase per tick
var START_VALUE_1 = 0; // initial value when it's the start date
var msInterval_1 = INTERVAL_1 * 1000;
var now_1 = Date.now();
var count_1 = Math.trunc((now_1 - START_DATE_1) / msInterval_1) * INCREMENT_1 + START_VALUE_1;

function formatNumber(number) {
  return new Intl.NumberFormat('it').format(number);
}

document.getElementById('counter_1').textContent = formatNumber(count_1);
setInterval(function() {
  count_1 += INCREMENT_1;
  document.getElementById('counter_1').textContent = formatNumber(count_1);
}, msInterval_1);

<pre id="counter_1"></pre>