Question

金额是从起始值到结束值的动画，但我想将此金额数字设置为格式化方式。假设数字开始从1000到10000的动画，那么它应格式化为10,000

＆＃13;

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);
}

＆＃13;

<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>

＆＃13;

我尝试了很多，但没有找到任何运气。任何人都可以帮我修理它吗？提前谢谢。

Answer 1

你在错误的地方打电话给toLocaleString()。您需要在current函数中的animateValue变量上调用它，而不是在该函数的（不存在的）结果上调用它。试试这个：

＆＃13;

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);
}

＆＃13;

<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>

＆＃13;

Answer 2

parseFloat(current).toLocaleString('en-US');诀窍

function myCalculator() {
  $(".container2").show();
  var start = 1000;
  var end = 10000;
  var duration = 2000;
  animateValue("value", start, end, duration);
}

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 = parseFloat(current).toLocaleString('en-US');
    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>

在动画编号中添加数字格式作为货币（10,000）

2 个答案: