Question

我使用了jQuery animate函数来帮助旋转数字计数器。以下codepen演示此内容。

这是功能：

function statsSpin(IDofObject, stat, duration) {
  $({countNum: $(IDofObject).text()}).animate({countNum: stat}, {
    duration: duration,
    easing:'linear',
    step: function() {
      $(IDofObject).text(Math.floor(this.countNum));
    },
    complete: function() {
      $(IDofObject).text(this.countNum);
    }

  });
};

目前它从一个小数位旋转，例如日，月，年0到14。如何修改以便从00-00-00旋转到08-09-14？

Answer 1

如果值小于10，您只需要用0填充数字。由于您需要执行此操作两次，我只需为其创建一个简单的实用函数

function statsSpin(IDofObject, stat, duration) {
  $({countNum: $(IDofObject).text()}).animate({countNum: stat}, {
    duration: duration,
    easing:'linear',
    step: function() {
      var num = padNumber(Math.floor(this.countNum));          
      $(IDofObject).text(num);
    },
    complete: function() {
      $(IDofObject).text(padNumber(this.countNum));
    }

  });
};

function padNumber( num){
  return num < 10 ? '0'+num : num;
}

的 DEMO

Answer 2

您可以使用 slice() 功能将前导0添加到数字。如果您将step和complete功能更改为以下功能，则应该有效：

function statsSpin(IDofObject, stat, duration) {
    $({
        countNum: $(IDofObject).text()
    }).animate({
        countNum: stat
    }, {
        duration: duration,
        easing: 'linear',
        step: function () {
            var num = ("0" + Math.floor(this.countNum)).slice(-2);
            $(IDofObject).text(num);
        },
        complete: function () {
            var num = ("0" + this.countNum).slice(-2);
            $(IDofObject).text(num);
        }
    });
};

有关示例，请参阅此 FIDDLE 。我们在数字中加上一个前导0，并取结果字符串的最后两个字符。

将计数器旋转到包含两位数的数字

2 个答案: