Orologio digitale client side

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

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.

© Risorse.net (www.risorse.net)
pagina in versione stampabile:
http://www.risorse.net /dhtml/teoria/1999/luglio/10.asp?print=ok