Countdown html?

marcocarrieri

Che ne dici di questa cosa in javascript?

<html>
<head>
<title> Esempio countdown</title>
<script type="text/javascript">
function countdown()
{
var_anno=2009;
var_mese=12;
var_giorno=7;
var_ore=17;
var_minuti=9;
var_secondi=0;
data_scandeza= new Date(var_anno,var_mese-1,var_giorno,var_ore,var_minuti,var_secondi);
data_oggi= new Date();
differenza=(data_scandeza-data_oggi);
giorni=parseInt(differenza/86400000);
differenza=differenza-(giorni86400000);
ore=parseInt(differenza/3600000);
differenza=differenza-(ore3600000);
minuti=parseInt(differenza/60000);
differenza=differenza-(minuti60000);
secondi=parseInt(differenza/1000);
differenza=differenza-(secondi1000);
if (giorni <= "0" && ore <= "0" && minuti <= "0" && secondi <= "0")
{
document.getElementById("blocco").innerHTML="TEMPO SCADUTO";
}
else
{
document.getElementById("blocco").innerHTML=giorni+' giorni '+ore+' ore '+minuti+' min '+secondi+' sec';
setTimeout("countdown()",1000)
}
}
</script>
</head>
<body onload="countdown()">
<div id="blocco"></div>
</body>
</html>

davidanna23

Ma è una pagina intera, io voglio inserire il countdown all'interno di una pagina...

marcocarrieri

Beh ma il file lo si può aggiornare tranquillamente.
Io l'ho messa come fosse una pagina perchè cosi si poteva copiare e incollare il testo per provarlo.

Si puo benissimo modificare a piacimento.
In particolare per le tue esigenze ti consiglio di:

Creare un file Javascript e mettere li il codice Javascript presente nella pagina cosi resta più pulitio.
Includere tale file Javascript nella pagina generale che ha bisogno del countdown.
Creare un div all'interno della tua pagina con id "blocco" (o eventualmente cambiare il nome all'interno del codice Javascript).
Settare la data nel file Javascript.
Nel body della pagina mettere <body onload="countdown()">

stickerland

Buongiorno, anche se è passato un pò di tempo dall'ultimo script, vorrei capire se era possibile e come poter fare aggiungere a questo script la possibilità di quando scade alla data stabilita un redirect di pagina, non so se sono stato chiaro nell'esporre il mio problema.

A presto Giovanni

marcocarrieri

Qua dentro potresti mettere un location.href.

if (giorni <= "0" && ore <= "0" && minuti <= "0" && secondi <= "0")
{
document.getElementById("blocco").innerHTML="TEMPO SCADUTO";
location.href="http://www.google.it";
}

stickerland

Grazie mooolto gentile funziona. Grazie di tutto, anche per la celere risposta.

marcocarrieri

Alla prossima.

ripkirby

@marcocarrieri said:

Alla prossima.

Salve a tutti, e complimenti per la filosofia di supporto e condivisione della conoscenza alla base di questo forum.

Vorrei chiedervi come gestire con questo script il fuso orario di chi visita la pagina, ovvero il mio countdown è settato sulla timezone italiana, ma chi legge il sito potrebbe essere in America o in Asia, quindi il countdown dovrebbe tenere conto della zona del visitatore della pagina per mostrare un countdown corretto.

Grazie anticipatamente,

RipKirby

marcocarrieri

Si gioca sull'orario UTC, e sui fusi orari (+2) quello italiano.[PHP]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="it">
<head>
<title> Esempio countdown</title>
<script type="text/javascript">
function countdown()
{
var_anno=2012;
var_mese=08;
var_giorno=21;
var_ore=15;
var_minuti=0;
var_secondi=0;
data_scandeza= new Date(var_anno,var_mese-1,var_giorno,var_ore,var_minuti,var_secondi);
data_oggi= new Date();
var now_utc = new Date(data_oggi.getUTCFullYear(), data_oggi.getUTCMonth(), data_oggi.getUTCDate(), data_oggi.getUTCHours(), data_oggi.getUTCMinutes(), data_oggi.getUTCSeconds());
differenza=(data_scandeza-now_utc);
giorni=parseInt(differenza/86400000);
differenza=parseInt(differenza-(giorni86400000));
ore=parseInt(differenza/3600000);
ore=parseInt(ore-2);
differenza=parseInt(differenza-((ore+2)3600000));
minuti=parseInt(differenza/60000);
differenza=parseInt(differenza-(minuti60000));
secondi=parseInt(differenza/1000);
differenza=parseInt(differenza-(secondi1000));
if (giorni <= "0" && ore <= "0" && minuti <= "0" && secondi <= "0")
{
document.getElementById("blocco").innerHTML="TEMPO SCADUTO";
}
else
{
document.getElementById("blocco").innerHTML=giorni +' giorni '+ore+' ore '+minuti+' min '+secondi+' sec';
setTimeout("countdown()",1000)
}
}
function getGMTDate(date)
{
var week = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
return week[date.getUTCDay()] + ", " + date.toGMTString();
}
</script>
</head>
<body onload="countdown()">
<div id="blocco"></div>
</body>
</html>
[/PHP]

ripkirby

Grazie mille, funziona perfettamente!

Alla prossima,

Rip

marcocarrieri

Hai gia avvertito tutti gli amici di oltre continente e fatto il test? Eh eh..

ripkirby

no, ma ho aperto un paio di sessioni in remote desktop in Asia e in America. per testare la pagina con lo script

Ciao

Rip

pezzotto

sei un grande marcocarreri!!!
ho un piccolo problemino nel codice che hai citato vorrei aumentare la grandezza del carattere del timer ma non so proprio come fare mi aiuteresti a farlo per favore???
oltre alla grandezza del timer vorrei anche aumentare e magari cambiare di colore la scritta "TEMPO SCADUTO"...
grazie in anticipo

marcocarrieri

Lo puoi fare con i fogli di stile.
Mettendo classi o id.