简体   繁体   中英

Animated number counter not adding commas

I have a number counter that counts from 0 to a specified value. Currently it works to the fixed decimal point, but it won't add the commas in if the value is over 1,000 (for example if i type 10000 i should expect 10,000 but it currently returns 10000.00).

Could anyone help me out with this? I have supplied my full function that does this however the only part that runs the animation is detailed in the comments starting with //ANIMATION STARTS HERE.

Thank you in advance!

 numbersAnimate(_Panel) { if (!_Panel) { return; } const _Document = document.documentElement; let lang = _Document.getAttribute('lang'); const _PanelAmounts = _Panel.querySelectorAll('.panel__amount'); if (!_PanelAmounts) { return; } for (const _PanelAmount of _PanelAmounts) { const $PanelAmount = $(_PanelAmount); const value = $PanelAmount.data('amount'); if (!value || value.length < 1) { return; } if (isNaN(value)) { return; } //ANIMATION STARTS HERE.... $PanelAmount.prop('Counter', 0).animate({ Counter: value }, { duration: 1000, easing: 'linear', step: function(now) { $PanelAmount.text(this.Counter.toFixed(2)); } }); } _Panel.classList.add('animated'); //JSON Structure "statistic": { "amount": "10000", "symbol": "%" }, 
 <span className="panel__amount panel-text-style-c" data-amount={jsonData.statistic.amount}>0</span> 

You can use toLocaleString()

 var number = 1547885415.235489654 console.log('Correctly formated number : ', number.toLocaleString('en-US', {maximumFractionDigits: 2})); 

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM