使用千位分隔符格式化 setInterval() 计时器

Question

这里是新手，我一直在玩这个 setInterval() 计数计时器，我的目标是让计数器在计数时显示千位 (,) 分隔符。有没有一种简单的方法可以做到这一点，还是需要一个困难的解决方案？我试过使用 toLocaleString，但无济于事。到目前为止，这是我的代码。

<p id="test">0</p>
<button id="button" onclick="b().toLocaleString('en-US')">Start</button>
<script>
    var c = 0;
    function a() { 
        document.getElementById("test").innerHTML = ++c;
    }
function b() {
setInterval(a, 5);
}
</script>

Answer 1

将所有内容放入 a()。让c首先作为数字递增，然后用.toLocalString()将其格式化为字符串，然后将字符串分配给DOM。在示例中，<p> 已更改为 <output>，并且字符串分配给它的 .value 属性。 b() 只是一个开始间隔的包装器，它没有 return 值，因此 b().toLocalString() 除了引发错误外什么都不做。

<output id="test">0</output><br>
<button onclick="b()">Start</button>
<script>
  const test = document.getElementById("test");
  let c = 0;

  function a() {
    ++c;
    let formatted = c.toLocaleString('en-US');
    test.value = formatted;
  }

  function b() {
    setInterval(a, 5);
  }
</script>

Answer 2

您的代码中的问题是您将 .toLocaleString('en-US') 调用到 b()，但是 b() 没有返回任何内容，因此 .toLocaleString('en-US') 没有处理任何内容。

正确的方法是将 .toLocaleString('en-US') 转换为字符串（例如 c），然后将其打印为 document.getElementById("test").

var c = 0;
function a() {
  ++c;
  document.getElementById("test").innerHTML = c.toLocaleString('en-US');
}
function b() {
  setInterval(a, 5);
}

<p id="test">0</p>
<button id="button" onclick="b()">Start</button>

使用千位分隔符格式化 setInterval() 计时器

Formatting a setInterval() Timer with thousands separators

html

counter

setinterval

separator