Question

I am using the following countdown script which works great, but I can’t figure out how to add leading zeros to the numbers (eg so it displays 09 instead of 9.) Can anybody help me out please? Here’s the current script:

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

Answer 1

You just need to check if the variables are minor than 10 and add them the leading zero.
Try the following:

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

---

Update:

You can also use @Alnitak solution and wrap it with a function, the effect is the same and you’ll centralize your logic:

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