-
[javascript] Countdown
Salve a tutti, premetto che non conosco il javascript, ma (purtroppo :P) ho la necessità di creare un countdown in una mia pagina, e quindi mi ci sono dovuto cimentare. I dati vengono presi da un database, fatti gli opportuni calcoli si ricavano le ore rimanenti, i minuti rimanenti e i secondi. Si passano queste variabili ad una funzione che dovrebbe effettuare il countdown. Per ora lasciamo perdere la parte dal database e i relativi calcoli (che ho già pronti), ma passiamo direttamente al countdown. Girando quì e per la rete ho trovato un codice che dovrebbe fare al caso mio:
Codice:
<?php
$remainingHour = 10;
$remainingMinutes = 10;
$remainingSeconds = 10;
?>
<html>
<head>
<script type="text/javascript">
var hours = <?php echo $remainingHour; ?>
var minutes = <?php echo $remainingMinutes; ?>
var seconds = <?php echo $remainingSeconds; ?>
function setCountDown ()
{
seconds--;
if (seconds < 0){
minutes--;
seconds = 59
}
if (minutes < 0){
hours--;
minutes = 59
}
if (hours < 0){
days--;
hours = 23
}
document.getElementById("remain").innerHTML =hours+" hours, "+minutes+" minutes, "+seconds+" seconds";
setTimeout ( "setCountDown()", 1000 );
}
</script>
</head>
<body onload="setCountDown();">
<table>
<tr><td id="remain"><?php echo "$remainingHour hours, $remainingMinutes minutes, $remainingSeconds seconds";?></td></tr>
</table>
</body>
</html>
Insomma, ho delle variabili che contengono i minuti i secondi e le ore rimaste. Le passo ad una funzione js che dovrebbe decrementare ogni secondo (facendo i dovuti controlli). La funzione è ricorsiva, quindi attende un secondo (setTimeOut) e ricomincia a funzionare. La logica mi sembra corretta, ed è per questo che sto impazzendo. Il risultato che ottengo è questo http://mahat.altervista.org/broswer/prova.php, cioè vedo 10:10:10 (che sono i valori che ho imposto provvisoriamente nelle variabili) ma non viene decrementato un bel nulla!
Se qualcuno avesse 5 minuti per correggere quelle poche righe di codice e dirmi dove sbaglio mi farebbe un immenso favore (senza contare che mi eviterebbe un esaurimento).
Attendo fiducioso!
-
mancano i punti e virgola.
Sostituisci:
Codice:
var hours = <?php echo $remainingHour; ?>
var minutes = <?php echo $remainingMinutes; ?>
var seconds = <?php echo $remainingSeconds; ?>
con:
Codice:
var hours = <?php echo $remainingHour; ?>;
var minutes = <?php echo $remainingMinutes; ?>;
var seconds = <?php echo $remainingSeconds; ?>;
---
in javascript, la console degli errori (nei browser) può aiutare molto :wink:
Ciao!
-
alemoppo sei il mio eroe! Essendo il mio primo approccio al javascript ci avrei messo una vita ad accorgermi di quell'errore! Mi hai risparmiato un sacco di fatica XD Anche perchè dicevo "la logica è giusta, l'errore dev'essere di sintassi". Grazie ancora!
-
Sì, mancano i punti e virgola, ma se le istruzioni sono su righe diverse non sono necessari (benché ritengo che per correttezza e altro debbano essere comunque messi).
Il problema è che nel codice qui riportato le dichiarazioni delle variabili sono su righe diverse, ma guardando il sorgente della pagina riportata no (mi chiedo, perché?).
Comunque un codice di questo genere potrebbe portare dei problemi, setInterval potrebbe richiamare la tua funzione un po' troppo presto o un po' troppo tardi, e queste (grandi) variazioni si accumuleranno, portando a scrivere un'informazione scorretta.
Un metodo migliore è quello di immagazinare la data dell'evento in un'unica variabile, creando un oggetto Date, e poi confrantarlo con l'ora attuale nella funzione richiamata da setTimeout.
