Question

我正在使用此jQuery代码段将数字计数器的动画从0设置为范围中提供的数字。有人可以告诉我如何修改它以使数字从给定值开始时将DOWN计为0吗？

<span class="count">200</span>

$('.count').each(function () {
    $(this).prop('Counter', 0).animate({
        Counter: $(this).text()
    }, {
        duration: 4000,
        easing: 'swing',
        step: function (now) {
            $(this).text(Math.ceil(now));
        }
    });
});

Answer 1

这样的东西？我假设步骤函数中的'now'只是计算步数。

$('.count').each(function () {
    $(this).data('start', parseInt($(this).text())).animate({
        Counter: $(this).text()
    }, {
        duration: 4000,
        easing: 'swing',
        step: function (now) {
            $(this).text($(this).data(start) - now);
        }
    });
});

我在jsFiddle（https://jsfiddle.net/0mtht3xm/）验证了这一点：

$('.count').each(function () {
    $(this).data('start', parseInt($(this).text())).prop('Counter', 0).animate({
        Counter: $(this).text()
    }, {
        duration: 4000,
        easing: 'swing',
        step: function (now) {
            $(this).text($(this).data('start') - Math.ceil(now));
        }
    });
});

Answer 2

有无数种不同的方法可以创建一个倒计数到0的计数器。这就是我要做的事情：

HTML：

<span class="count">200</span>

JS：

var $count = $('.count');

var num = parseInt($count.text());
var interval = window.setInterval(updateTime, 1000);

function updateTime() {
  num--;
  $count.text(num.toString());
  if (num <= 0) {
    window.clearInterval(interval);
  }
}

jQuery数字计数器

2 个答案: