Prima di proseguire...
Potrebbe interessarti la nostra collezione di esercizi C risolti?
Nella sezione del sito dedicata alla scuola è presente un esempio di countdown
Oggi vediamo come realizzare un countdown in javascript sincronizzato con il server, cioè un countdown che usa il timestamp del server, senza usare però connessioni javascript.
Lo script conta il tempo effettivo, non considerando quindi il passaggio all’ora legale e viceversa.
Nell’esempio seguente è stata usata come data la fine della scuola, con l’aggiunta di un piccolo script php che in automatico quando finisce la scuola e viene aggiornata la pagina cambia la data usando come data l’inizio della scuola.
<?php
$tempo = time();
$fine_scuola = mktime(12,00,00,06,11,2011);
?>
<html>
<head>
<script>
//INIZIO IMPOSTAZIONI
var data_evento = <?=$tempo<=$fine_scuola?"new Date(2011,5,11,12,0,0)":"new Date(2011,8,12,8,0,0)"?>;
var evento = <?=$tempo<=$fine_scuola?"\"alla fine della scuola\"":"\"all'inizio della scuola\""?>;
var evento_concluso = <?=$tempo<=$fine_scuola?"\"la scuola è finita\"":"\"la scuola è iniziata\""?>;
var tag_ini = "<span style=\"color:red;font-weight:bold;\">";
var tag_fin = "</span>"
//FINE IMPOSTAZIONI
var data = new Date();
var server = <?=$tempo.";\n"?>
var differenza = parseInt(data.getTime()/1000)-server;
//funzioni
function go_countdown(){
countdown(data_evento);
}
//funzione che conta il tempo rimanente
function countdown(data_evento){
var risultato = document.getElementById("tempo_rimanente");
data_evento = data_evento.getTime();
var data = new Date();
data = data.getTime()-differenza*1000;
var manc = data_evento-data;
var mex = "";
if(manc>0){
mex = tag_ini+"mancano";
var giorni = parseInt(manc/86400000);
var ore = parseInt(manc%86400000/3600000);
var minuti = parseInt(manc%86400000%3600000/60000);
var secondi = parseInt(manc%86400000%3600000%60000/1000);
var millisecondi = parseInt(manc%86400000%3600000%60000%1000);
mex += ((giorni>0)?" "+giorni+((giorni==1)?" giorno,":" giorni,"):"");
mex += ((ore>0)?" "+ore+((ore==1)?" ora,":" ore,"):"");
mex += ((minuti>0)?" "+minuti+((minuti==1)?" minuto,":" minuti,"):"");
mex += ((secondi>0)?" "+secondi+((secondi==1)?" secondo,":" secondi,"):"");
mex += ((millisecondi>0)?" "+millisecondi+((millisecondi==1)?" millisecondo":" millisecondi"):"");
mex += " "+evento+tag_fin;
setTimeout("countdown(data_evento);",30);
}else
mex = tag_ini+evento_concluso+tag_fin;
risultato.innerHTML = mex;
}
</script>
</head>
<body>
</body>
<div id="tempo_rimanente">caricamento countdown in corso...(controlla di avere il javascript abilitato se no prova ad aggiornare la pagina)</div>
</html>
Il suo funzionamento è abbastanza ovvio:
All’inizio mi calcolo la differenza tra il timestamp del server e quello del client ed ogni volta la sommo al nuovo timestamp corrente ottenuto dal client, poi eseguo normalmente i calcoli di differenza tra il timestamp corrente e quello della fine dell’evento calcolandomi poi gli equivalenti in giorni,ore,minuti,secondi,millisecondi. infine richiamo la funzione.
N.B. Nel setTimeout non ho messo 1ms ma 30ms per questioni di efficienza, perché tanto l’occhio umano non lo distingue.
P.S. Sarebbe utile implementare questa funzione sotto forma di classe, in modo da passare i parametri di impostazione come parametri del costruttore
N.B. Nella sezione del sito dedicata alla scuola è presente un esempio di countdown
countdown javascript(client) sincronizzato con il server by cardinale claudio is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.