Costruire un conto alla rovescia in JavaScript
-
26-10-2019 - |
Domanda
Sto costruendo un conto alla rovescia in JavaScript e sto avendo problemi formattazione esattamente come voglio. Fondamentalmente, ho una variabile denominata totalTime che è inizialmente impostato al numero totale di secondi che il conto alla rovescia per eseguire. Ogni secondo, questo numero diminuisce di 1, e io convertirlo in minuti e secondi per la visualizzazione della pagina.
Quello che mi ha inciampare è che voglio includere un 0 iniziale sul numero di minuti dalla fine, ma solo se la prima valore della totalTime è 600 (10.00) o superiore. Quindi, se ho impostato totalTime a 600, voglio che il conto alla rovescia per visualizzazione 10:00, 09:59, 09:58, ecc (si noti lo 0); ma se ho impostato totalTime a 300, voglio il conto alla rovescia per visualizzare 05:00, 04:59, 04:58, ecc.
Detto in altro modo, lo 0 dovrebbe apparire in base alla quantità di tempo che il conto alla rovescia inizia con (il valore iniziale di totalTime), non quanto tempo è attualmente a sinistra (il valore corrente di tempo totale). Come faccio a fare questo?
EDIT: ecco il codice che ho attualmente: 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();
Soluzione
Fiddle: http://jsfiddle.net/JFYaq/1/
Spiegazione:
Per prefisso uno zero quando necessario, la seguente funzione può essere utilizzato:
function pad(n){
return n > 9 ? "" + n : "0" + n;
}
Nota "" + n
. La funzione pad(n)
restituirà sempre una stringa, che è utile per applicare metodi delle stringhe.
L'imbottitura deve sempre essere usato al secondo contatore. Per il contaminuti, memorizzare il tempo originale in una variabile, e controllare se supera i 600 o meno:
var original = 600;
function padMinute(n){
return original >= 600 && n < 9 ? "0" + n : "" + n;
}
Relative al codice:
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;
}
giri .split("")
divide la stringa in un elenco di caratteri. .join("</span><span>")
viene utilizzato per concatenare il set di stringa, aggiungendo </span><span>
tra ogni carattere. Il Tutto il risultato si unisce con <span>
e </span>
in modo che il codice HTML finale è valido.
Modello di Esecuzione:
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>"