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

Question

The amount is animating from start value to end value but i want to animate this amount number into formatted way. Let suppose number start animating from 1000 to 10000 then it should be formatted as 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> 

I tried a lot but not found any luck. can anyone help me to fixed it? Thanks in advance.

Answer 1

You're calling toLocaleString() in the wrong place. You need to call it on the current variable within the animateValue function, not on the (non-existant) result of that function. Try this:

 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> 

Answer 2

parseFloat(current).toLocaleString('en-US'); Do the trick

 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>