Timer eventi Javascript

Vediamo come realizzare un sistema di countdown in javascript al fine di ricordare un evento importante a tutti i visitatori del tuo sito, come quello descritto di seguito.

.

La struttura del codice si compone di due parti:

• un codice countdown.js che si occupa di effettuare il calcolo del tempo rimasto;
• l'elemento che richiama la funzione nella pagina in cui vogliamo visualizzare il countdown.

Come visualizzare il risultato nella pagina

il codice da inserire nell'intestazione della pagina

<script type="text/javascript" src="countdown.js"></script>
<script type="text/javascript">
   var occasion=" al MotoGP Jerez de la Frontera";
   setcountdown(2006,03,26,0,0,0);
   window.onload=countdown;
</script>

Al suo interno c'è il richiamo al file countdown.js il testo che si desidera far visualizzare, la data dell'evento e l'inizializzazione  del conteggio automatico.
Per visualizzare il risultato incolliamo nel punto desiderato un semplice paragrafo:

<p id="crosscount"></p>

il codice per il countdown automatico

Ecco il codice contenuto nel file countdown.js

<pre>var montharray = new Array("Jan","Feb","Mar","Apr","May", "Jun","Jul","Aug","Sep","Oct","Nov","Dec");
var message_on_occasion="Time out!";
var dstring=' d ';
var hstring=' h ';
var mstring=':';
var sstring='';

function setcountdown(theyear,themonth,theday,thehour,themin,thesec) {
   yr=theyear;
   mo=themonth;
   da=theday;
   hr=thehour;
   min=themin;
   sec=thesec;
}
function countdown() {
   var today=new Date()
   var todayy=today.getFullYear()
   var todaym=today.getMonth()
   var todayd=today.getDate()
   var todayh=today.getHours()
   var todaymin=today.getMinutes()
   var todaysec=today.getSeconds()

   var todaystring=montharray[todaym]+" "+todayd+", "+todayy+" "+todayh+":"+todaymin+":"+todaysec
  
   futurestring=montharray[mo-1]+" "+da+", "+yr+" "+hr+":"+min+":"+sec
   dd=Date.parse(futurestring)-Date.parse(todaystring)
  
   dday=Math.floor(dd/(60*60*1000*24)*1);
   dhour=Math.floor((dd%(60*60*1000*24))/(60*60*1000)*1);
   dmin=Math.floor(((dd%(60*60*1000*24))%(60*60*1000))/(60*1000)*1);
   dsec=Math.floor((((dd%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1);

   if (dsec < 10) dsec = '0' + dsec;
   if (dmin < 10) dmin = '0' + dmin;
   if (dhour < 10) dhour = '0' + dhour;
   
   if(dday<=0&&dhour<=0&&dmin<=0&&dsec<=1&&todayd==da) {
      crosscount.innerHTML=message_on_occasion;
      return;
   }
   if (dday<=-1) crosscount.innerHTML=message_on_occasion;
   else  crosscount.innerHTML = dday+dstring +dhour+hstring+dmin+mstring+ dsec+sstring+occasion;
   setTimeout("countdown()",1000);
}
</pre>