Construyendo un reloj de cuenta regresiva en JavaScript

Question

Estoy construyendo un reloj de cuenta regresiva en JavaScript y tengo problemas para formatearlo exactamente como quiero. Básicamente, tengo una variable llamada TotalTime, que inicialmente se establece en el número total de segundos para el que se ejecutará la cuenta regresiva. Cada segundo, este número disminuye en 1, y lo convierto en minutos y segundos para mostrar en la página.

Lo que me está tropezando es que quiero incluir un 0 líder en el número de minutos restantes, pero solo si el inicial El valor del tiempo total es de 600 (10:00) o mayor. Entonces, si establecí el tiempo total en 600, quiero que la cuenta regresiva se muestre 10:00, 09:59, 09:58, etc. (tenga en cuenta el líder 0); Pero si establecí el tiempo total en 300, quiero que la cuenta regresiva se muestre 5:00, 4:59, 4:58, etc.

Dicho de otra manera, los 0 principales deberían aparecer en función de la cantidad de tiempo que la cuenta regresiva comienza con (el valor inicial del tiempo total), no cuánto tiempo queda actualmente (el valor actual del tiempo total). ¿Cómo haría esto?

Editar: aquí está el código que tengo actualmente: 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

Violín: http://jsfiddle.net/jfyaq/1/

Explicación:

Para prefijo un cero cuando sea necesario, se puede usar la siguiente función:

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

Nota "" + n. los pad(n) La función siempre devolverá una cadena, que es útil para aplicar métodos de cadena.

El relleno siempre debe usarse en el segundo mostrador. Para el contador de minuto, almacene el tiempo original en una variable y verifique si excede las 600 o no:

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

---

Relacionado con su código:

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("") Los giros dividen la cadena en una lista de caracteres. .join("</span><span>") se usa para concatenar el conjunto de cadenas, agregando </span><span> entre cada personaje. Todo el resultado se une con <span> y </span> para que el HTML final sea válido.

Modelo de ejecución:

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