Erstellen einer Countdown -Uhr in JavaScript

Question

Ich erstelle eine Countdown -Uhr in JavaScript und habe Probleme, genau so zu formatieren, wie ich es will. Grundsätzlich habe ich eine Variable namens TotalTime, die zunächst auf die Gesamtzahl der Sekunden eingestellt ist, für die der Countdown ausgeführt wird. Jede Sekunde nimmt diese Zahl um 1 ab, und ich konvertiere sie in Minuten und Sekunden für die Anzeige auf der Seite.

Was mich aufstolpert, ist, dass ich in der Anzahl der verbleibenden Minuten eine führende 0 einfügen möchte, aber nur wenn der Initial Der Wert der Gesamtzeit beträgt 600 (10:00) oder höher. Wenn ich also die Gesamtzeit auf 600 festlegt, möchte ich, dass der Countdown 10:00, 09:59, 09:58 usw. angezeigt wird (beachten Sie die führende 0); Aber wenn ich TotalTime auf 300 festlegt, möchte ich, dass der Countdown 5:00, 4:59, 4:58 usw. angezeigt wird.

Anders ausgedrückt, die führende 0 sollte basierend auf der Zeit, die der Countdown beginnt (dem Anfangswert der Gesamtzeit), erscheint. nicht Wie viel Zeit ist derzeit übrig (der aktuelle Wert der Gesamtzeit). Wie würde ich das machen?

Bearbeiten: Hier ist der Code, den ich derzeit habe: 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

Geige: http://jsfiddle.net/jfyaq/1/

Erläuterung:

Um bei Bedarf eine Null zu Präfix, kann die folgende Funktion verwendet werden:

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

Notiz "" + n. Das pad(n) Die Funktion gibt immer eine Zeichenfolge zurück, die für die Anwendung von Stringmethoden nützlich ist.

Die Polsterung sollte immer am zweiten Zähler verwendet werden. Lagern Sie für den Minute -Schalter die ursprüngliche Zeit in einer Variablen und prüfen Sie, ob sie 600 überschreitet oder nicht:

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

---

In Bezug auf Ihren 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("") Wendet die Zeichenfolge in eine Liste von Zeichen auf. .join("</span><span>") wird verwendet, um den String -Satz zu verkettet und hinzuzufügen </span><span> zwischen jedem Charakter. Das gesamte Ergebnis ist zusammen miteinander verbunden <span> und </span> so dass das endgültige HTML gültig ist.

Ausführungsmodell:

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