Orologio dinamico in Dhtml

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

CONOSCENZE CONSIGLIATE PER QUESTO ARTICOLO: Html, Javascript

COMPATIBILITÀ: Ms Ie (Netscape e Opera non aggiornano l'ora con lo scandire dei secondi)
FILES ESTERNI: Nessuno
Visualizza la demo
Scarica la demo

Tra le tante capacità che Dynamic Html può vantare, una è sicuramente quella della gestione del tempo, sia per creare animazioni personalizzate, sia per mostrare l'ora corrente. Nel secondo caso, che rappresenta la demo di questa settimana, esiste un difetto abbastanza fastidioso ma purtroppo invalicabile. L'orologio farà riferimento all'ora del computer del visitatore e non a quella del server. Potrebbe essere quindi che l'ora mostrata nel sito sia errata. Per risolvere questo inconveniente, è necessario operare con tecnologie server side quali Asp (www.risorse.net/asp) Php (www.risorse.net/php), Perl (www.risorse.net/perl) o Cold Fusion (www.risorse.net/coldfusion). Vediamo comunque di esaminare il codice dell'esempio:

<STYLE TYPE="text/css">
#clock {color:blue; font-size:120%} /* Format the clock. */
</STYLE>

Queste prime tre righe di sintassi, sono un comune foglio di stile (www.risorse.net/css) che formattano il testo dell'orologio (colore blu e dimensione del font pari a 120%).

Il primo sorgente Javascript lo troviamo subito dopo:

<SCRIPT LANGUAGE="JavaScript">
// Check whether IE4 or later.
var MS = navigator.appVersion.indexOf("MSIE");
window.isIE4 = (MS > 0) &&
(parseInt(navigator.appVersion.substring(MS + 5, MS + 6))
>= 4);

function lead0(val) {
// Add leading 0s when necessary.
return (val < 10) ? "0" + val.toString() : val;
}

function buildTime() {
var time = new Date();
var ampm = "AM";
var h = time.getHours();
// Fix military time and determine ampm.
if (h > 12) {
h = h - 12;
ampm = " PM";
}
return lead0(h) + ":" + lead0(time.getMinutes()) + ":" +
lead0(time.getSeconds()) + ampm;
}

function tick() {
// Replace the clock's time with the current time.
document.all.clock.innerText = buildTime();
}


Il primo paragrafo della sintassi scripting identifica la versione di Microsoft Internet Explorer (l'unico browser in grado di eseguire correttamente la demo).
La funzione buildTime (terzo capoverso) ottiene l'ora dal computer. Il formato che verrà utilizzato è il seguente:
hh:mm:ss P/AM

Il calcolo per l'ante o il post meridiem, viene effettuato con le seguenti righe di codice, contenute nella variabile buildTime:

var ampm = "AM"; if (h > 12) { h = h - 12; ampm = " PM";

Tutto ciò, contenuto nell'<head> del documento. All'interno del <body>, vanno inseriti due gestori degli eventi (www.risorse.net/javascript) del tipo onload (al caricamento del documento) ed onunload (alla chiusura).

<BODY ONUNLOAD="if (null != window.tmr) clearInterval(window.tmr);" ONLOAD="if (window.isIE4) window.tmr = setInterval('tick()', 999);">

In conclusione, il richiamo per la visualizzazione dell'ora:

<SPAN ID="clock">
<SCRIPT LANGUAGE="JavaScript">
// Down-level script support --
// output an initial static time.
document.write(buildTime());
</SCRIPT>
</SPAN>.


© Risorse.net (www.risorse.net)
pagina in versione stampabile:
http://www.risorse.net /dhtml/teoria/2000/maggio/37.asp?print=ok