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".
 

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>.
 

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