Quanti giorni mancano al prossimo Natale

Arretrati lista "Una demo Dhtml a settimana"
di Risorse.net

CONOSCENZE CONSIGLIATE PER QUESTO ARTICOLO: Html, Javascript

COMPATIBILITÀ: Ms Ie, Netscape, Opera
FILES ESTERNI: nessuno
Visualizza la demo
Scarica la demo

Settimana scorsa abbiamo visto come realizzare il sistema di download del file settimanale allegato a questa mailing list con Php e mercoledì scorso con le Asp. Per chi non avesse la possibilità di utilizzare tecnologie server side, è possibile sfruttare lo stesso sistema con Javascript. E' infatti possibile passare parametri ad una pagina Web, aggiungendo all'indirizzo del documento il punto di domanda e il file da scaricare. Un sistema simile, è stato visto all'interno di Risorse.net all'indirizzo www.risorse.net/magazine/leggi.asp?id=36&pag=3.

Per non restare troppo fermi su questo argomento all'interno della mailing list, rimandiamo a quella pagina per approfondimenti.

Oggi vedremo infatti un sistema countdown al giorno di Natale. La peculiarità dello script, risiede nella sua perpetuatezza. Passato il 25 Dicembre infatti, l'esempio si aggiorna da solo ed è in grado di calcolare, senza alcuna modifica, i giorni che mancano al Natale successivo.

La demo è stata realizzata da Claudio Corrado ed è stata ritoccata, per un funzionamento perpetuo, da Tripeni Zanforlin. Ringraziamo entrambi per la disponibilità.

Iniziamo quindi ad analizzare l'esempio, vedendo la prima parte dei codici Javascript da inserire:

//funzione che mostra un commento in base al periodo dell'anno in corso.
//si possono cambiare i commenti modificando il testo tra le virgolette (tenendo i tag <p>)
//si possono modificare le date di apparizione di un commento modificando solo i numeri dopo la parola mese
function calcmes() {
if (mese>0 && mese<5) {
document.write("<p><p>Non è un po' presto per pensare al prossimo?")
}
if (mese>=5 && mese<9) {
document.write("<p><p>Non sarebbe meglio pensare all'estate?")
}
if (mese>=9 && mese<=12) {
document.write("<p><p>Non manca molto...")
}
}

Questa sintassi, inserisce un commento in base al tempo mancante. Se ci trovassimo tra Gennaio e Maggio (mese>0 && mese<5) verrebbe richiamato "Non è un po' presto per pensare al prossimo?".
Tra Giugno e Agosto invece (mese>=5 && mese<9) apparirebbe "Non sarebbe meglio pensare all'estate?".
Infine, tra Settembre e Dicembre (mese>=9 && mese<=12): "Non manca molto...". Questa sintassi, inserisce un commento in base al tempo mancante. Se ci trovassimo tra Gennaio e Maggio (mese>0 && mese<5) verrebbe richiamato "Non è un po' presto per pensare al prossimo?". Tra Giugno e Agosto invece (mese>=5 && mese<9) apparirebbe "Non sarebbe meglio pensare all'estate?". Infine, tra Settembre e Dicembre (mese>=9 && mese<=12): "Non manca molto...".

Inserito il commento, vengono aggiunte le funzioni per il calcolo dei giorni mancanti:

//funzione di conversione dei giorni della settimana da numeri in lettere
function convgio() {
if (gset==0) { gset="domenica" }
if (gset==1) { gset="lunedi" }
if (gset==2) { gset="martedi" }
if (gset==3) { gset="mercoledi" }
if (gset==4) { gset="giovedi" }
if (gset==5) { gset="venerdi" }
if (gset==6) { gset="sabato" }
}

//funzione di conversione dei mesi dell'anno da numeri in lettere
function convmes() {
if (mese==0) { mese="gennaio" }
if (mese==1) { mese="febbraio" }
if (mese==2) { mese="marzo" }
if (mese==3) { mese="aprile" }
if (mese==4) { mese="maggio" }
if (mese==5) { mese="giugno" }
if (mese==6) { mese="luglio" }
if (mese==7) { mese="agosto" }
if (mese==8) { mese="settembre" }
if (mese==9) { mese="ottobre" }
if (mese==10) { mese="novembre" }
if (mese==11) { mese="dicembre" }

}

//funzione per il calcolo della data odierna
function dataoggi() {
oggi=new Date()
gset=oggi.getDay()
gmes=oggi.getDate()
mese=oggi.getMonth()
anno=oggi.getYear()
}

//funzione per il calcolo dei giorni mancanti al prossimo Natale (o altra ricorrenza)
//per cambiare ricorrenza modificare il mese e il giorno del campo natale (formato inglese)
function natale() {
oggi=new Date()
natale=new Date("12/25/"+ anno)
giornims=natale.getTime() - oggi.getTime()
giorni=Math.floor(giornims / (1000 * 60 * 60 * 24))
return giorni
}

La sintassi qui descritta, presenta dei commenti (preceduti da //) per capire al meglio il suo funzionamento. Rimandiamo a tali appunti per approfondimenti.

Fatto questo, non ci resta che richiamare all'interno dei tag <body></body>, le funzioni appena create e il countdown:

<script language="JavaScript">
//il testo all'interno delle virgolette e' modificabile (tranne i tag <h2> e </h2>)
document.write("<h2>Conto alla rovescia da oggi al prossimo Natale</h2>")

//chiamata alla funzione che definisce l'oggetto data
dataoggi()

//chiamata alla funzione del commento
calcmes()

//chiamate alle funzioni di conversione dei numeri della data in testo
convmes()
convgio()

//visualizzazione della data odierna
document.write("<p><p>Oggi è " + gset + " " + gmes + " " + mese + " " +anno)

//visualizzazione dei giorni mancanti al prossimo Natale (o altra ricorrenza)
//il testo all'interno delle virgolette e' modificabile (tranne il richiamo +natale()+)

document.write(" e mancano " + natale() + " giorni al prossimo Natale")
</script>

Questo è tutto il necessario per inserire i giorni mancanti al prossimo Natale.

A Martedì prossimo.

Per qualsiasi dubbio, puoi scrivere sul Forum di Risorse.net, all'indirizzo www.risorse.net/community/forum

L A   C O M U N I T A `   D I   R I S O R S E . N E T
Per accedere alle sezioni protette di Risorse.net (Forum, Newsgroup, sezione password dell'archivio Dhtml ecc.) devi essere iscritto alla Comunità. L'iscrizione è gratuita e viene garantita la tutela della privacy (675/96). Visita www.risorse.net/community.

© Risorse.net (www.risorse.net)
pagina in versione stampabile:
http://www.risorse.net /dhtml/teoria/2001/novembre/103.asp?print=ok