Come creare un countdown per siti e blog


Il countdown più comunemente conosciuto con il termine italiano "il conto alla rovescia" è quello che appare prima di qualche film televisivo (10, 9, 8, 7, 6, 5, 4, 3, 2, 1...) anche se questa abitudine sembra ormai essersi persa oppure quello che si fa appunto per festeggiare l'anno nuovo coi botti e con lo spumante sull'istante allo scoccare della mezzanotte. Questi sono i casi più comuni ma penso che abbiate visto gli utilizzi differenti che se ne possono fare su vari siti e blog, ad esempio può essere inserito un countdown su un sito di scuola per dare il benvenuto alla stagione estiva o per annunciare l'arrivo delle vacanze di Natale, gli studenti non vedono l'ora di staccare la spina dallo studio per divertirsi... oppure può essere semplicemente utilizzando per mostrare quanto tempo manca alla data del proprio compleanno o alla pubblicazione di un novo articolo, gioco, news, evento.

Insomma un countdown può essere utilizzato per un'infinità di scopi ed anche se non è indispensabile può fare piacere vederlo in certe circostanze; sicuramente vi starete chiedendo come crearne uno dato che non siete esperti di alcun linguaggio di programmazione ma non ci vuole neanche molto a realizzarlo da zero dato che è tra le prime cose che si imparano studiando Javascript da qualche corso online o qualche manuale cartaceo, ad ogni modo ho pensato di semplificarvi le cose mettendovi un codice già pronto per essere usato.

Qui sotto troverete il codice javascript per creare un countdown che calcola le ore, i minuti ed i secondi rimanenti; copiatelo ed incollatelo in un'area HTML del vostro sito o blog così com'è senza aggiungere spazi o andare a capo:
<h2>
Countdown Anno 2015</h2>
<hr />
<script language="JavaScript">
now = new Date ();
y2k = new Date ("Jan 01 2015 00:00:00") ;
seconds = (y2k - now) / 1000 ;
seconds=Math.round (seconds);
document.write ("<b>Secondi rimanenti:</b> " + seconds) ;
minutes=seconds / 60;
minutes=Math.round (minutes)
document.write ("<p><b>Minuti rimanenti:</b> " + minutes) ;
hours=minutes / 60;
hours=Math.round (hours)
document.write ("<p><b>Ore rimanenti:</b> " + hours) ;
</script>

Personalizzazioni

Ovviamente il codice di base è quello riportato sopra ma questo non significa che dobbiate utilizzarlo così com'è e soprattutto solo per l'anno 2015. In rosso sono evidenziate le scritte e gli elementi che possono essere modificati.

Jan 01 2015 00:00:00 = significa che il countdown prenderà come punto di riferimento lo scoccare della mezzanotte e l'inizio dell'anno nuovo 1 Genniao 2015; quando un giorno questa data sarà superata il countdown continuerà a funzionare ugualmente ma vi ritroverete numeri negativi che conteggiano i secondi, i minuti e le ore che sono passate dal giorno assegnato. Per la modifica della data dovete inserire prima il mese con le tre lettere iniziali in inglese, poi il giorno, l'anno ed infine ore, minuti e secondi.

seconds=Math.round (seconds); = è una istruzione che arrotonda il numero dei secondi rimanenti al giorno assegnato, se rimuovete questa riga i secondi diventeranno un numero decimale con la virgola; certamente una soluzione molto più precisa in termini numerici ma più brutta e meno immediata esteticamente. L'istruzione di questo caso esegue la funzione Math alla variabile seconds, come potete vedere dal codice precedente è stato fatto la stessa operazione anche per i minuti e le ore.

Il colore, il font e la dimensione dei caratteri può essere cambiata utilizzando i comuni codici HTML racchiudendo le parole in rosso. Essendo un codice semplice mi sono limitato ad inserire solamente il grassetto ma voi potete andare anche oltre con le personalizzazioni.

L'unica pecca di questo script è che il variare del tempo è visibile solo aggiornando la pagina.

Su un altro articolo ho parlato di countdown online molto più belli e più colorati, alcuni dei quali si possono aggiungere come widget sul proprio sito o blog.



Nessun commento :

Scrivi un commento

I commenti dovranno prima essere approvati da un amministratore. Verranno pubblicati solo quelli utili a tutti e attinenti al contenuto della pagina. Per commentare utilizzate un account Google/Gmail, altrimenti la modalità "anonimo".