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

Question

我已经使用jQuery的动画函数来帮助旋转到数字计数器。以下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

所有你需要做的是垫一0你的号码，如果该值小于10，既然你需要做的这两次我就创建了一个简单的utiltity功能，它

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，并取出结果字符串的最后两个字符。