javascript - 添加数字格式作为动画数字中的货币(10,000)

Question

金额从起始值到最终值都有动画，但我想以格式化方式将此金额数字动画化。假设数字从 1000 开始动画到 10000，那么它的格式应该为 10,000

function myCalculator() {
  $(".container2").show();
  var start = 1000;
  var end = 10000;
  var duration = 2000;
  animateValue("value", start, end, duration).toLocaleString();
}

function animateValue(id, start, end, duration) {
  var range = end - start;
  var current = start;
  var increment = end > start ? 10 : -10;
  var stepTime = Math.abs(Math.floor(duration / range));
  var obj = document.getElementById(id);
  var timer = setInterval(function() {
    current += increment;
    obj.innerHTML = current;
    if (current == end) {
      clearInterval(timer);
    }
  }, stepTime);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<button type="button" onclick="myCalculator();">Click Here to See Animation</button>

<div class="container2" style="display:none;">
  Animating Amount $ <span id="value"></span>
</div>

我尝试了很多，但没有找到任何运气。谁能帮我解决它？ 提前致谢。

Answer 1

您在错误的位置调用了toLocaleString()。您需要在 animateValue 函数中的 current 变量上调用它，而不是在该函数的(不存在的)结果上调用它。试试这个:

function myCalculator() {
  $(".container2").show();
  var start = 1000;
  var end = 10000;
  var duration = 2000;
  animateValue("value", start, end, duration); // remove .toLocaleString()
}

function animateValue(id, start, end, duration) {
  var range = end - start;
  var current = start;
  var increment = end > start ? 10 : -10;
  var stepTime = Math.abs(Math.floor(duration / range));
  var obj = document.getElementById(id);
  var timer = setInterval(function() {
    current += increment;
    obj.innerHTML = current.toLocaleString(); // add .toLocaleString() here
    if (current == end) {
      clearInterval(timer);
    }
  }, stepTime);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<button type="button" onclick="myCalculator();">Click Here to See Animation</button>

<div class="container2" style="display:none;">
  Animating Amount $ <span id="value"></span>
</div>