Building a countdown clock in JavaScript

Question

I'm building a countdown clock in JavaScript and am having trouble formatting it exactly how I want. Basically, I have a variable called totalTime which is initially set to the total number of seconds that the countdown will run for. Every second, this number decreases by 1, and I convert it into minutes and seconds for displaying on the page.

What's tripping me up is that I want to include a leading 0 on the number of minutes remaining, but only if the initial value of totalTime is 600 (10:00) or greater. So, if I set totalTime to 600, I want the countdown to display 10:00, 09:59, 09:58, etc. (note the leading 0); but if I set totalTime to 300, I want the countdown to display 5:00, 4:59, 4:58, etc.

Put another way, the leading 0 should appear based on the amount of time the countdown starts off with (the initial value of totalTime), not how much time is currently left (the current value of totalTime). How would I do this?

EDIT: here's the code I have currently: http://jsfiddle.net/JFYaq/

// Get the countdown element
var countdown = document.getElementById("countdown");

// Set the total time in seconds
var totalTime = 600;

// Every second...
var interval = setInterval(function(){
    // Update the time remaining
    updateTime();

    // If time runs out, stop the countdown
    if(totalTime == -1){
        clearInterval(interval);
        return;
    }
}, 1000);

// Display the countdown
function displayTime(){
    // Determine the number of minutes and seconds remaining
    var minutes = Math.floor(totalTime / 60);
    var seconds = totalTime % 60;

    // Add a leading 0 to the number of seconds remaining if it's less than 10
    if (seconds < 10){
        seconds = "0" + seconds;
    }

    // Split the number of minutes into two strings
    var minutesString = minutes + "";
    var minutesChunks = minutesString.split("");

    // Split the number of seconds into two strings
    var secondsString = seconds + "";
    var secondsChunks = secondsString.split("");

    // If the total time is 10 minutes or greater...
    if (totalTime >= 600){
        // Add a leading 0 to the number of minutes remaining if it's less than 10
        if (minutes < 10){
            minutes = "0" + minutes;
        }
        // Display the time remaining
        countdown.innerHTML = "<span>" + minutesChunks[0] + "</span>" + "<span>" + minutesChunks[1] + "</span>" + ":" + "<span>" + secondsChunks[0] + "</span>" + "<span>" + secondsChunks[1] + "</span>";
    }
    // If the total time is less than 10 minutes...
    else {
        // Display the time remaining without a leading 0 on the number of minutes
        countdown.innerHTML = "<span>" + minutes + "</span>" + ":" + "<span>" + secondsChunks[0] + "</span>" + "<span>" + secondsChunks[1] + "</span>"
    }        
}

// Update the time remaining
function updateTime(){
    displayTime();
    totalTime--;
}

// Start the countdown immediately on the initial pageload
updateTime();

Answer 1

Fiddle: http://jsfiddle.net/JFYaq/1/

Explanation:

To prefix a zero when necessary, the following function can be used:

function pad(n){
    return n > 9 ? "" + n : "0" + n;
}

Note "" + n. The pad(n) function will always return a string, which is useful for applying string methods.

The padding should always be used at the second counter. For the minute counter, store the original time in a variable, and check whether it exceeds 600 or not:

var original = 600;
function padMinute(n){
    return original >= 600 && n < 9 ? "0" + n : "" + n;
}

---

Relating to your code:

function displayTime(){
    var minutes = Math.floor(totalTime / 60);
    var seconds = totalTime % 60;

    minutes = "<span>" + padMinute(minutes).split("").join("</span><span>") + "</span>";
    seconds = "<span>" + pad(seconds).split("").join("</span><span>") + "</span>";

    countdown.innerHTML = minutes + ":" + seconds;
}

.split("") turns splits the string in a list of characters. .join("</span><span>") is used to concatenate the set of string, adding </span><span> between every character. The The whole result is joined with <span> and </span> so that the final HTML is valid.

Execution model:

1. padMinute(minutes)                       "09"
2.             .split("")                   Array( "0" , "9" )
3.                   .join("</span><span>")
                                            "0</span><span>9"
4.                "<span>" + .. + "</span>" "<span>0</span><span>9<span>"