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

我使用了jqueryanimate函数来帮助实现旋转到数字计数器。下面的演示将对此进行演示

以下是函数：

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？

如果值小于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;
}

函数statsSpin（IDofObject、stat、duration）{
$（{countNum:$（IDofObject.text（）}）。动画（{countNum:stat}）{
持续时间：持续时间，
放松：'线性'，
步骤：函数（）{
var num=padNumber（Math.floor（this.countNum））；
$（IDofObject）.text（num）；
},
完成：函数（）{
$（IDofObject）.text（padNumber（this.countNum））；
}
});
};
函数编号（num）{
返回数值<10？'0'+num:num；
}

---

您可以使用功能将前导0添加到数字。如果将

步骤

和

完成

功能更改为以下内容，则应能正常工作：

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);
        }
    });
};

有关示例，请参见此。我们将前导0添加到数字中，并获取结果字符串的最后两个字符。

检查更新的代码笔