我正在尝试制作柜台动画,但是当我写文字时,当我只写数字时会显示NaN,效果很好
HTML
<div class="counter-value" data-count="300">300</div>
<div class="counter-value" data-count="400">100</div>
<div class="counter-value" data-count="1500">200</div>
</div>
JavaScript
var a = 0;
$(window).scroll(function () {
var oTop = $('#counter').offset().top - window.innerHeight;
if (a == 0 && $(window).scrollTop() > oTop) {
$('.counter-value').each(function () {
var $this = $(this),
countTo = $this.attr('data-count');
$({
countNum: $this.text()
}).animate({
countNum: countTo
},
{
duration: 2000,
easing: 'swing',
step: function () {
$this.text(Math.floor(this.countNum));
},
complete: function () {
$this.text(this.countNum);
}
});
});
a = 1;
}
});
我想做的是:
300+sometext
400+sometext
1500+sometext
答案 0 :(得分:2)
只需做两件事即可处理它。将以下功能替换为以下代码:
step: function() {
$this.text(Math.floor(parseInt(this.countNum, 10)));
},
complete: function() {
$this.text(this.countNum + " some text...");
}