在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 off（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>"