动画数字计数器不显示十进制数字

Question

大家早上好，

我有一个动画数字计数器，从 0 计数到指定数字。但是，如果我输入十进制数(即 99.99%(，它会四舍五入为 100%。有没有办法让它计数到给出的数字？

如果您需要更多信息，请告诉我。

提前感谢！

numbersAnimate(_Panel) {
if (!_Panel) {
return;
}
// Get document language
const _Document = document.documentElement;
let lang = _Document.getAttribute('lang');
// Grab all panel amount nodes
const _PanelAmounts = _Panel.querySelectorAll('.panel__amount');
if (!_PanelAmounts) {
return;
}
//Loop over all the panel amounts
for (const _PanelAmount of _PanelAmounts) {
//Convert to jQuery object
const $PanelAmount = $(_PanelAmount);
//Panel amount stored in value
const value = $PanelAmount.data('amount');
//If there is no value return
if (!value || value.length < 1) {
return;
}
// If not a number return
if (isNaN(value)) {
return;
}
//Animation....
$PanelAmount.prop('Counter', 0).animate({
Counter: value
}, {
duration: 1000,
easing: 'linear',
step: function(now) {
$PanelAmount.text(this.Counter.toFixed());
}
});
}
//Add animated class because scroll event checks if it's there, if it isn't then add it.
_Panel.classList.add('animated');

//JSON Structure
"statistic": {
"amount": "99.99",
"symbol": "%"
},

<span className="panel__amount panel-text-style-c" data-amount={jsonData.statistic.amount}>0</span>

Answer 1

您正在使用将舍入到最接近整数的Math.ceil(now)。你试过删除它吗？

$PanelAmount.text(now).toLocaleString(lang);

Answer 2

旧：

//Panel amount is the animated number
$PanelAmount.prop('Counter', 0).animate({
Counter: value
}, {
duration: 1000,
easing: 'linear',
step: function(now) {
$PanelAmount.text(Math.ceil(now)).toLocaleString(lang);
}
});

新增功能：

function startCounter(){
	$('.PanelAmount').each(function (index) {
var size = $(this).text().split(".")[1] ? $(this).text().split(".")[1].length : 0;
	    $(this).prop('Counter',0).animate({
	        Counter: $(this).text()
	    }, {
	        duration: 2000,
	        easing: 'swing',
	        step: function (now) {
	            $(this).text(parseFloat(now).toFixed(size));
	        }
	    });
	});
}	
startCounter();

.PanelAmount {

font-size: 30px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="counter">99.99</div>

新的 JQuery 工作到精确的小数点