Add leading zeros to this javascript countdown script?

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

You want to check this question out: http://stackoverflow.com/questions/2686855/is-there-a-javascript-function-that-can-pad-a-string-to-get-to-a-determined-leng — buffcoredave, Dec 12 '12 at 11:05

Diogo Raminhos · Accepted Answer · 2012-12-12T11:10:46.463

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

Thanks a lot, that's a real help! – 1475293 Dec 12 '12 at 11:31 — 1475293, Dec 12 '12 at 11:31

score 2 · Answer 2 · answered Dec 12 '12 at 11:05

2

The simplest thing is to throw in a utility function to pad your numbers:

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

answered Dec 12 '12 at 11:05

Alnitak

334,560
70
407
495

score 2 · Answer 3 · answered Dec 12 '12 at 11:37

IMO, the easiest way to get leading zeroes would be to use substr:

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

easy-peasy. If you want to pour this into a function, returning a string:

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

And that's it.

score 0 · Answer 4 · answered Dec 12 '12 at 11:11

This should help:

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

The only difference is the method formatNum and it's four calls:

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

score 0 · Answer 5 · answered Dec 12 '12 at 11:14

0

Simply you should add preceding zero if the number is less that 10 with day, hour, second...

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

answered Dec 12 '12 at 11:14

R D

1,330
13
30

score 0 · Answer 6 · answered Oct 30 '19 at 13:52

I'm a newbie but I did this and it worked!

if (days< 10) {
        day =  "0"+days;}

  if (hours < 10) {
    hours = "0"+hours;
}

  if (minutes < 10) {
    minutes = "0"+minutes;
  }

  if (seconds < 10) {
    seconds = "0"+seconds;
}

  // Output the result
  document.getElementById("demo").innerHTML = days + ":" + hours + ":"
  + minutes + ":" + seconds + "";

Godwin Ugbabe · Answer 7 · 2023-02-26T19:28:28.413

0

days < 10 ? (day =  "0" + days) : days;
hours < 10 ? (hours = "0" + hours) : hours;
minutes < 10 ? (minutes = "0" + minutes) : minutes;
seconds < 10 ? (seconds = "0" + seconds) : seconds;
// Output the result
document.getElementById("demo").innerHTML = `${days}:${hours}:${minutes}:${seconds}`;

edited Feb 26 '23 at 19:28

answered Feb 26 '23 at 19:07

Godwin Ugbabe

11
4

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Mar 02 '23 at 15:42

score 0 · Answer 8 · answered Mar 02 '23 at 13:54

You can use String.prototype.padStart(), see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padStart.

I would structure your code in a different way, but the easiest way of using padStart in your code could be replacing this part:

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>'
];

with

var displayString = [
  '<div class="stat statBig">', day.padStart(2, '0'), '</div>',
  '<div class="stat statBig">', hour.padStart(2, '0'), '</div>',
  '<div class="stat statBig">', minute.padStart(2, '0'), '</div>',
  '<div class="stat statBig">', second.padStart(2, '0'), '</div>'
];

But you can also create a helper method like:

const formatValue = (value) => {
  if (typeof value !== 'string') {
    return value;
  }
  return value.padStart(2, '0');
}

And use template literals to simplify the writing of the markup:

var displayString = `
  <div class="stat statBig">${formatValue(day)}</div>
  <div class="stat statBig">${formatValue(hour)}</div>
  <div class="stat statBig">${formatValue(minute)}</div>
  <div class="stat statBig">${formatValue(second)}</div>
`;

Please remember that String.prototype.padStart() and Template literals are not supported in all versions of browsers, so always check caniuse.com before using them.

Add leading zeros to this javascript countdown script?

8 Answers8

Linked