我正在尝试将计数器的持续时间设置得较慢,而无需在代码中设置较大的持续时间数字,例如:
duration: 99999;
最初我将计数器设置为一个较低的数字,但计数将达到 1,000,000,00,但我希望能够控制计数的速度。
这是我目前的设置方式。
<div class="counter" data-count="1000000">0</div>
我的JS如下:
$('.counter').each(function() {
var $this = $(this),
countTo = $this.attr('data-count');
$({ countNum: $this.text()}).animate({
countNum: countTo
},
{
duration: 99999,
easing:'linear',
step: function() {
$this.text(Math.floor(this.countNum));
}
});
});
我是这方面的大三学生,所以如果有任何其他建议,我们将不胜感激。
谢谢
最佳答案
如果您想设置计数的速度,您可以尝试设置持续时间(以毫秒为单位)以匹配 countTo
值。例如,如果您希望每秒进行一次增量,请执行:duration: parseInt(countTo)*1000
。
$('.counter').each(function() {
var $this = $(this),
countTo = $this.attr('data-count');
$({
countNum: $this.text()
}).animate({
countNum: countTo
}, {
duration: parseInt(countTo) * 1000,
easing: 'linear',
step: function() {
$this.text(Math.floor(this.countNum));
},
complete: function() {
// Ensure that the final value is updated correctly
// ... especially when using very short durations
$this.text(this.countNum);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="counter" data-count="1000000">0</div>
关于javascript - 数到一个高数的持续时间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40059120/