將前導零添加到此JavaScript倒計時腳本？

我正在使用以下倒計時腳本，這很好用，但我無法弄清楚如何將前導零添加到數字中（例如，因此它顯示09而不是9.）任何人都可以幫我解決問題嗎？下面是當前的腳本：將前導零添加到此JavaScript倒計時腳本？

function countDown(id, end, cur){ 
     this.container = document.getElementById(id); 
     this.endDate = new Date(end); 
     this.curDate = new Date(cur); 


var context = this; 

var formatResults = function(day, hour, minute, second){ 
    var displayString = [ 
       '<div class="stat statBig">',day,'</div>', 
       '<div class="stat statBig">',hour,'</div>', 
       '<div class="stat statBig">',minute,'</div>', 
       '<div class="stat statBig">',second,'</div>' 
    ]; 
    return displayString.join(""); 
} 

var update = function(){ 
    context.curDate.setSeconds(context.curDate.getSeconds()+1); 

    var timediff = (context.endDate-context.curDate)/1000; 

    // Check if timer expired: 
    if (timediff<0){ 
     return context.container.innerHTML = formatResults(0,0,0,0); 
    } 

    var oneMinute=60; //minute unit in seconds 
    var oneHour=60*60; //hour unit in seconds 
    var oneDay=60*60*24; //day unit in seconds 

    var dayfield=Math.floor(timediff/oneDay); 
    var hourfield=Math.floor((timediff-dayfield*oneDay)/oneHour); 
    var minutefield=Math.floor((timediff-dayfield*oneDay-hourfield*oneHour)/oneMinute); 
    var secondfield=Math.floor((timediff-dayfield*oneDay-hourfield*oneHour-minutefield*oneMinute)); 

    context.container.innerHTML = formatResults(dayfield, hourfield, minutefield, secondfield); 

    // Call recursively 
    setTimeout(update, 1000); 
}; 

// Call the recursive loop 
update(); 
}

來源

2012-12-12 ejwgrant

你想檢查這個問題：http://stackoverflow.com/questions/2686855/is-there-a-javascript-function-that-can-pad-a-string-to-get-to-a -deng-leng – buffcoredave

你只需要檢查變量比10小的，並添加他們領先零。嘗試以下操作：

function countDown(id, end, cur){ 
     this.container = document.getElementById(id); 
     this.endDate = new Date(end); 
     this.curDate = new Date(cur); 


var context = this; 

var formatResults = function(day, hour, minute, second){ 
    day = (day < 10) ? "0"+day : day; 
    hour = (hour < 10) ? "0"+hour : hour; 
    minute = (minute < 10) ? "0"+minute : minute; 
    second = (second < 10) ? "0"+second: second; 
    var displayString = [ 
       '<div class="stat statBig">',day,'</div>', 
       '<div class="stat statBig">',hour,'</div>', 
       '<div class="stat statBig">',minute,'</div>', 
       '<div class="stat statBig">',second,'</div>' 
    ]; 
    return displayString.join(""); 
} 

var update = function(){ 
    context.curDate.setSeconds(context.curDate.getSeconds()+1); 

    var timediff = (context.endDate-context.curDate)/1000; 

    // Check if timer expired: 
    if (timediff<0){ 
     return context.container.innerHTML = formatResults(0,0,0,0); 
    } 

    var oneMinute=60; //minute unit in seconds 
    var oneHour=60*60; //hour unit in seconds 
    var oneDay=60*60*24; //day unit in seconds 

    var dayfield=Math.floor(timediff/oneDay); 
    var hourfield=Math.floor((timediff-dayfield*oneDay)/oneHour); 
    var minutefield=Math.floor((timediff-dayfield*oneDay-hourfield*oneHour)/oneMinute); 
    var secondfield=Math.floor((timediff-dayfield*oneDay-hourfield*oneHour-minutefield*oneMinute)); 

    context.container.innerHTML = formatResults(dayfield, hourfield, minutefield, secondfield); 

    // Call recursively 
    setTimeout(update, 1000); 
}; 

// Call the recursive loop 
update(); 
}

更新：

您還可以使用@Alnitak溶液中，用功能包起來，效果是一樣的，你會集中你的邏輯：

function countDown(id, end, cur){ 
     this.container = document.getElementById(id); 
     this.endDate = new Date(end); 
     this.curDate = new Date(cur); 


var context = this; 

var addLeadingZeros = function(number){ 
    return (number < 10) ? "0"+number : number; 
} 

var formatResults = function(day, hour, minute, second){ 
    day = addLeadingZeros(day); 
    hour = addLeadingZeros(hour); 
    minute = addLeadingZeros(minute); 
    second = addLeadingZeros(second); 
    var displayString = [ 
       '<div class="stat statBig">',day,'</div>', 
       '<div class="stat statBig">',hour,'</div>', 
       '<div class="stat statBig">',minute,'</div>', 
       '<div class="stat statBig">',second,'</div>' 
    ]; 
    return displayString.join(""); 
} 

var update = function(){ 
    context.curDate.setSeconds(context.curDate.getSeconds()+1); 

    var timediff = (context.endDate-context.curDate)/1000; 

    // Check if timer expired: 
    if (timediff<0){ 
     return context.container.innerHTML = formatResults(0,0,0,0); 
    } 

    var oneMinute=60; //minute unit in seconds 
    var oneHour=60*60; //hour unit in seconds 
    var oneDay=60*60*24; //day unit in seconds 

    var dayfield=Math.floor(timediff/oneDay); 
    var hourfield=Math.floor((timediff-dayfield*oneDay)/oneHour); 
    var minutefield=Math.floor((timediff-dayfield*oneDay-hourfield*oneHour)/oneMinute); 
    var secondfield=Math.floor((timediff-dayfield*oneDay-hourfield*oneHour-minutefield*oneMinute)); 

    context.container.innerHTML = formatResults(dayfield, hourfield, minutefield, secondfield); 

    // Call recursively 
    setTimeout(update, 1000); 
}; 

// Call the recursive loop 
update(); 
}

來源

2012-12-12 11:05:43

非常感謝，這是一個真正的幫助！ – ejwgrant

最簡單的事情是在一個效用函數拋出墊你的號碼：

function pad2(n) { 
    return (n < 10) ? '0' + n : n; 
}

來源

2012-12-12 11:05:10 Alnitak

這應有助於：

function countDown(id, end, cur){ 
     this.container = document.getElementById(id); 
     this.endDate = new Date(end); 
     this.curDate = new Date(cur); 


var context = this; 

var formatNum = function (num) { 
    if (num.toString().length < 2) { 
     return '0' + num; 
    }  
    return num; 
} 

var formatResults = function(day, hour, minute, second){ 
    formatNum(day); 
    formatNum(hour); 
    formatNum(minute); 
    formatNum(second);  
    var displayString = [ 
       '<div class="stat statBig">',day,'</div>', 
       '<div class="stat statBig">',hour,'</div>', 
       '<div class="stat statBig">',minute,'</div>', 
       '<div class="stat statBig">',second,'</div>' 
    ]; 
    return displayString.join(""); 
} 

var update = function(){ 
    context.curDate.setSeconds(context.curDate.getSeconds()+1); 

    var timediff = (context.endDate-context.curDate)/1000; 

    // Check if timer expired: 
    if (timediff<0){ 
     return context.container.innerHTML = formatResults(0,0,0,0); 
    } 

    var oneMinute=60; //minute unit in seconds 
    var oneHour=60*60; //hour unit in seconds 
    var oneDay=60*60*24; //day unit in seconds 

    var dayfield=Math.floor(timediff/oneDay); 
    var hourfield=Math.floor((timediff-dayfield*oneDay)/oneHour); 
    var minutefield=Math.floor((timediff-dayfield*oneDay-hourfield*oneHour)/oneMinute); 
    var secondfield=Math.floor((timediff-dayfield*oneDay-hourfield*oneHour-minutefield*oneMinute)); 

    context.container.innerHTML = formatResults(dayfield, hourfield, minutefield, secondfield); 

    // Call recursively 
    setTimeout(update, 1000); 
}; 

// Call the recursive loop 
update(); 
}

唯一的區別是方法formatNum和它的四次調用：

formatNum(day); 
formatNum(hour); 
formatNum(minute); 
formatNum(second);

來源

2012-12-12 11:11:30

只要你應該添加前面零如果這個數小於10天，小時，第二...

day = day<10?'0' + day : day; 
hour = hour<10?'0' + hour : hour; 
second = second<10?'0' + second : second;

來源

2012-12-12 11:14:02

IMO，獲得前導零的最簡單的方法是使用substr：

var n = 10; 
console.log(('00' + n).substr(-2));//logs 10 
n = 2; 
console.log(('00' + n).substr(-2));//logs 02

容易 - peasy。如果你想把這個功能倒進去，返回一個字符串：

function addLeadingZeroes(n) 
{ 
    return ('00' + n).substr(-2); 
}

就是這樣。

來源

2012-12-12 11:37:22

將前導零添加到此JavaScript倒計時腳本？

回答

相關問題