Javascript countdown

Un classico sempreverde script che permette un conto alla rovescia in tempo reale che calcola e scrive a video quanto manca in giorni ore minuti secondi ad una certa data.

Gli elementi sono: lo script vero e proprio, il campo del form in cui si visualizza il count down, il CSS che modifica la classica visualizzazione del campo input, l'evento body onload a cui si applica l'avvio dello script.

Vediamo lo script:

[script type="text/javascript"]
function getTime() {
now = new Date();
evento = new Date("Dec 31 2011 59:59:59"); // inserire la data dell'evento
days = (evento - now) / 1000 / 60 / 60 / 24;
daysRound = Math.floor(days);
hours = (evento - now) / 1000 / 60 / 60 - (24 * daysRound);
hoursRound = Math.floor(hours);
minutes = (evento - now) / 1000 /60 - (24 * 60 * daysRound) - (60 * hoursRound);
minutesRound = Math.floor(minutes);
seconds = (evento - now) / 1000 - (24 * 60 * 60 * daysRound) - (60 * 60 * hoursRound) - (60 * minutesRound);
secondsRound = Math.round(seconds);
sec = (secondsRound == 1) ? " secondo" : " secondi";
if (secondsRound <= 0) { sec = ''; secondsRound =''; }
min = (minutesRound == 1) ? " minuto, " : " minuti, ";
if (minutesRound <= 0) { min = ''; minutesRound = ''; }
hr = (hoursRound == 1) ? " ora, " : " ore, ";
if (hoursRound <= 0) { hr = ''; hoursRound = ''; }

dy = (daysRound == 1)  ? " giorno, " : " giorni, ";
if (daysRound <= 0) { dy = ''; daysRound = ''; }
if (now > evento) document.data.visualizza.value = "Evento avvenuto"
else {
document.data.visualizza.value = "Mancano " + daysRound  + dy + hoursRound + hr + minutesRound + min + secondsRound + sec + " all'evento!";
newtime = window.setTimeout("getTime();", 1000);
}
}
[/script]

Lo script si può modificare in modo che allo scadere della data la pagina si modifichi secondo le nostre istruzioni modificando la riga

if (now > evento) document.data.visualizza.value = "Evento avvenuto"

in

if (now > evento) { qui le istruzioni da eseguire }

Il CSS, semplicemente eliminiamo i bordi del campo

[style type="text/css"]
.date {
    border: 0px;
}

[/style]

Il form inserito nel documento (deve avre come name quello tulizzato nel javascript e applicata la classe del CSS)

<form name="data">
<input type="text" name="visualizza" size="110" class="date">
</form>

E infine la chiamata on load nel tag body

[body onLoad="getTime()"]

Qui potete visualizzare l'esempio e il codice