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