jQuery数字计数器

Question

我正在使用这个 jQuery sn-p 动画一个从 0 到跨度中提供的数字的数字计数器。有人可以告诉我如何修改它以在从给定值开始时将数字倒数到 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

这样的？我假设 step 函数中的“现在”只是计算步数。

$('.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);
  }
}