用JavaScript構建倒數時鍾

Question

我正在用JavaScript構建一個倒數時鍾，並且在格式化它時遇到了麻煩。 基本上，我有一個名為totalTime的變量，該變量最初設置為倒計時將運行的總秒數。 此數字每秒減少1，然后將其轉換為分鍾和秒以顯示在頁面上。

讓我煩惱的是，我希望在剩余分鍾數中包含前導0，但前提是totalTime的初始值為600（10:00）或更大。 因此，如果我將totalTime設置為600，則希望倒數顯示10：00、09：59、09：58等（注意前導0）； 但是如果我將totalTime設置為300，我希望倒數顯示為5：00、4：59、4：58等。

換句話說，前導0應該根據倒數開始的時間量（totalTime的初始值） 而不是當前剩余的時間（totalTime的當前值）出現。 我該怎么做？

編輯：這是我當前擁有的代碼： 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

小提琴： http : //jsfiddle.net/JFYaq/1/

說明：

要在必要時添加零前綴，可以使用以下功能：

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

注意"" + n 。 pad(n)函數將始終返回字符串，這對於應用字符串方法很有用。

應始終在第二個計數器處使用填充。 對於分鍾計數器，將原始時間存儲在變量中，並檢查其是否超過600：

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

---

與您的代碼有關：

 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("")輪流將字符串拆分為字符列表。 .join("</span><span>")用於連接字符串集，在每個字符之間添加</span><span> 。 整個結果與<span>和</span>連接在一起，以便最終的HTML有效。

執行模式：

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