如何格式化不断变化的跨度？

Question

$<span id="money">0</span>

我有这个显示多少钱的跨度。这个数字会不断更新，因为这是我正在制作的闲置游戏。

function moneyClick(number) {
    money = money + number;
    document.getElementById("money").innerHTML = money;
    lifetimeearnings = lifetimeearnings + number;
    document.getElementById("lifetimeearnings").innerHTML = lifetimeearnings;
};

window.setInterval(function() {
    moneyClick(thugs);
    moneyClick(assassins * 3);
    moneyClick(farms * 5);
    moneyClick(lawyers * 11);
    moneyClick(rackets * 23);
    document.getElementById('thugEarn').innerHTML = thugEarn;
    document.getElementById('thugs').innerHTML = thugs;
    document.getElementById('assassinEarn').innerHTML = assassinEarn;
    document.getElementById('assassins').innerHTML = assassins;
    document.getElementById('farmEarn').innerHTML = farmEarn;
    document.getElementById('farms').innerHTML = farms;
    document.getElementById('lawyerEarn').innerHTML = lawyerEarn;
    document.getElementById('lawyers').innerHTML = lawyers;
    document.getElementById('racketEarn').innerHTML = racketEarn;
    document.getElementById('rackets').innerHTML = rackets;
}, 1000);

跨度由javascript中的上述两个函数更新。我想格式化跨度以用逗号显示钱，例如 1234 将变为 1,234，1234567 将变为 1,234,567。

我已经看到有一些方法可以做到这一点，但是 none 当 span 不断更新时，其中的方法已经奏效了。有没有办法在不断更新的同时保持文本格式？

Answer 1

只需在数字中添加逗号，然后再将其添加到 DOM。

    //A function to add commas to the number
    var formatNumber = function (number) {
      var splitNum;
      number = Math.abs(number);
      number = number.toFixed(2);
      splitNum = number.split('.');
      splitNum[0] = splitNum[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
      return splitNum.join(".");
    }

    function moneyClick(number) {
      money = money + number;

      //Add commas to the number before update the DOM
      document.getElementById("money").innerHTML = formatNumber(money);

      lifetimeearnings = lifetimeearnings + number;
      document.getElementById("lifetimeearnings").innerHTML = lifetimeearnings;
    };

    window.setInterval(function() {
      moneyClick(thugs);
      moneyClick(assassins * 3);
      moneyClick(farms * 5);
      moneyClick(lawyers * 11);
      moneyClick(rackets * 23);
      document.getElementById('thugEarn').innerHTML = thugEarn;
      document.getElementById('thugs').innerHTML = thugs;
      document.getElementById('assassinEarn').innerHTML = assassinEarn;
      document.getElementById('assassins').innerHTML = assassins;
      document.getElementById('farmEarn').innerHTML = farmEarn;
      document.getElementById('farms').innerHTML = farms;
      document.getElementById('lawyerEarn').innerHTML = lawyerEarn;
      document.getElementById('lawyers').innerHTML = lawyers;
      document.getElementById('racketEarn').innerHTML = racketEarn;
      document.getElementById('rackets').innerHTML = rackets;
    }, 1000);

Answer 2

您可以用这种方式在数字中添加逗号：

var number = 1234567;

document.querySelector('#money').innerHTML = number.toLocaleString();

$<span id="money"></span>

编辑

此外，为了确保数字四舍五入到正确的小数位数，您可以这样做：

var number = 1234.5678;

document.querySelector('#money').innerHTML = (+number.toFixed(2)).toLocaleString();

$<span id="money"></span>

在这种情况下，+ 符号将舍入值转换回数字，然后添加逗号。

如何格式化不断变化的跨度？

How to format a constantly changing span?

html

javascript

string-formatting