Risorse per webmaster

L A   C O M U N I T À   V I R T U A L E   I T A L I A N A   P E R   W E B   M A S T E R S

 
 
      Tecnologie
      HTML
      CSS
      DHTML
      FLASH
      ASP
      PHP
      JSP
      PERL
      XML
      SMIL
      WIRELESS
      PALMARI
      APACHE
      MYSQL
      PICOSQL
 
      Grafica
 
      Servizi
 
      Raccolte
 
      Recensioni
 
      Analisi
 
      Disclaimer

   Per tutti
 
  .: Magazine
  .: Editor
  .: Appunti
  .: Gratis
  .: Scripts
  .: Components
 
   Home page

Partner
Comunicati stampa
Proposte di viaggio
Prenotazione hotel
Prenota vacanze
Accessori palmari
Cerca alberghi
Guide turistiche

versione stampabile Mostra una versione adatta per la stampa  

Livello di difficoltÓ:Livello di difficoltÓ: medio  
Dynamic Html Ŕ una tecnologia approvata dal W3C per la creazione di siti Web dinamici ed interazioni client side con l'utente. In questa sezione sono disponibili centinaia di esempi ed arretrati della mailing list "Una demo Dhtml a settimana".
 

Quanti giorni mancano al prossimo Natale

Arretrati lista "Una demo Dhtml a settimana"
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.
 

 
 
Home > dhtml > teoria > 2001 > novembre > ...   © 1999-2017 Risorse.net, tutti i diritti riservati