Livello di difficoltà: |
|
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".
|
| |
Orologio digitale client side
Arretrati lista "Una demo Dhtml a settimana"
CONOSCENZE CONSIGLIATE PER QUESTO ARTICOLO: Html, Css, Javascript
COMPATIBILITÀ: Ms Ie, Netscape
FILES ESTERNI: Nessuno
Visualizza la demo
Scarica la demo
Mostrare l'ora sul proprio sito Internet è una sfiziosità sempre più in
voga, anche tra i Web masters più professionali.
Crearne uno, non richiede particolari capacità, ed è per questo che
abbiamo deciso di commetare la demo di oggi.
<BODY onLoad="show5()">
<span id="liveclock" style="position:absolute;left:0;top:0;">
</span>
In questa parte di codice, subito dopo l'<head> (che non contiene altro che
il <title>), viene richiamato il Javascript che esamineremo dopo, e la
posizione dell'orologio all'interno del documento: in questo caso, zero
pixel da sinistra e zero da destra.
Nel proseguio della demo, si incontra il Javascript che imposta l'ora:
<script language="JavaScript">
<!--
function show5(){
if (!document.layers&&!document.all)
return
var Digital=new Date()
var hours=Digital.getHours()
var minutes=Digital.getMinutes()
var seconds=Digital.getSeconds()
var dn="AM"
if (hours>12){
dn="PM"
hours=hours-12
}
if (hours==0)
hours=12
if (minutes<=9)
minutes="0"+minutes
if (seconds<=9)
seconds="0"+seconds
In questa prima parte dello script, viene impostato il codice utile a
registrare e mostrare l'ora del client (il computer che sta navigando il
sito). L'ora, non sarà mai superiore a 12:
hours=12
e, per le ore superiori a questo numero, si utilizzerà la convenzione inglese, che prevede l'utilizzo del PM o AM .
dn="PM"
var dn="AM"
Esaminiamo ora la parte finale del Javascript:
// change font size here to your desire
myclock="<font size='5' face='Arial' ><b><font size='1'>Data
corrente:</font></br>"+hours+":"+minutes+":"
+seconds+" "+dn+"</b></font>"
if (document.layers){
document.layers.liveclock.document.write(myclock)
document.layers.liveclock.document.close()
}
else if (document.all)
liveclock.innerHTML=myclock
setTimeout("show5()",1000)
}
// -->
</script>
In quest'ultima sezione di sorgente, viene impostato il font, l'accesso ai
layers per Netscape e ogni quanto tempo deve essere aggiornata l'ora.
Quest'ultima operazione, viene eseguita attraverso la riga:
setTimeout("show5()",1000)
Essendo impostato a 1000 (millisecondi), si intenderà un secondo, e quindi, nella demo si potrà vedere lo scandire dei secondi.
|
