Question

我正在努力制作一个增量/空闲游戏，不断改变金钱价值。我希望能够使用逗号分隔大数字。例如，1000变为1,000，依此类推，直到值变化为止。

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

上面显示了我如何使用span标签从javascript中调用money变量。即使在更改时，我如何确保这个货币变量保持不变格式？

修改

function formatNumber(e){
var rex = /(^\d{2})|(\d{1,3})(?=\d{1,3}|$)/g,
  val = this.value.replace(/^0+|\.|,/g,""),
  res;

if (val.length) {
res = Array.prototype.reduce.call(val, (p,c) => c + p)            // reverse the pure numbers string
           .match(rex)                                            // get groups in array
           .reduce((p,c,i) => i - 1 ? p + "," + c : p + "." + c); // insert (.) and (,) accordingly
res += /\.|,/.test(res) ? "" : ".0";                              // test if res has (.) or (,) in it
this.value = Array.prototype.reduce.call(res, (p,c) => c + p);    // reverse the string and display
  }
}

var mySpan = document.getElementById("money"); 
mySpan.addEventListener("change", formatNumber);

我现在已将此代码实现到我的javascript中，但它似乎仍然没有更新变量。

修改2

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

};

Answer 1

~~每当你在游戏的JavaScript中计算你的money变量的某些变化时，使用@redu pointed out的某些变化进行更新，或者~~使用setInterval（）每100个左右更新一次。

Answer 2

好的..我的评论中有点不对劲。据我所知，"change"事件监听器对像textContent这样的子节点的更改视而不见。事实上，我们可以使用这个"DOMSubtreeModified"事件监听器。所以;

function formatNumber(e) {
  var rex = /(^\d{2})|(\d{1,3})(?=\d{1,3}|$)/g,
      val = this.textContent.replace(/^0+|\.|,/g, ""),
      res;

  if (val.length) {
    res = Array.prototype.reduce.call(val, (p, c) => c + p)                       // reverse the pure numbers string
                         .match(rex)                                              // get groups in array
                         .reduce((p, c, i) => i - 1 ? p + "," + c : p + "." + c); // insert (.) and (,) accordingly
    res += /\.|,/.test(res) ? "" : ".0";                                          // test if res has (.) or (,) in it
    this.textContent = Array.prototype.reduce.call(res, (p, c) => c + p);         // reverse the string and display
  }
}

var mySpan = document.getElementById("money");
mySpan.addEventListener("DOMSubtreeModified", formatNumber);

for (var i = 0; i < 10; i++) {
  setTimeout(_ => mySpan.textContent = Math.floor(Math.random() * 10000000), 1000 * i);
}

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

使用逗号格式化不断变化的数字

2 个答案: