Construire une horloge de compte à rebours en JavaScript

Question

Je construis une horloge de compte à rebours en JavaScript et ne parviens pas à formater exactement ce que je veux. Au fond, j'ai une variable appelée totalTime qui est initialement fixé au nombre total de secondes que le compte à rebours pour courir. Chaque seconde, ce nombre diminue de 1, et je le convertir en minutes et secondes pour afficher sur la page.

Qu'est-ce qui me trébucher est que je veux inclure un 0 sur le nombre de minutes restantes, mais seulement si le initial valeur de totalTime est de 600 (10h00) ou plus. Donc, si je mets totalTime à 600, je veux que le compte à rebours à l'affichage 10:00, 09:59, 09:58, etc. (note le 0); mais si je mets totalTime à 300, je veux que le compte à rebours pour afficher 5h00, 4h59, 4h58, etc.

En d'autres termes, le 0 doit apparaître en fonction de la quantité de temps le compte à rebours commence avec (la valeur initiale de totalTime), pas combien de temps est actuellement à gauche (la valeur actuelle temps total). Comment puis-je faire?

EDIT: voici le code que j'ai actuellement: 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/

Explication:

Pour préfixe un zéro si nécessaire, la fonction suivante peut être utilisée:

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

Note "" + n. La fonction pad(n) renvoie toujours une chaîne, ce qui est utile pour appliquer la méthode de chaîne.

Le rembourrage doit toujours être utilisé au deuxième compteur. Pour le compteur de minutes, mémoriser l'heure d'origine dans une variable et vérifier si elle dépasse 600 ou non:

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

---

Relatives à votre 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;
}

tourne .split("") divise la chaîne dans une liste de caractères. .join("</span><span>") est utilisé pour concaténer l'ensemble de la chaîne, en ajoutant </span><span> entre chaque caractère. Le résultat est tout joint à <span> et </span> afin que le HTML final est valide.

Modèle d'exécution:

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>"