旋轉計數器到一個包含兩位數的數字

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，並取出結果字符串的最後兩個字符。