utentionline
searchengine
quicklinks
WebDesigner
Tutorials ASP
Tutorials XHTML
Tutorials Javascript
Tutorials HTML-CSS
Tutorials SQL
Tutorials PHP & MySQL
AJAX applicazioni web
Web Development
Template & Layout
Non solo Web :: Blog
Portfolio Lavori
Who is Yappy?
Benvenuto nella Newsletter
libririviste
Calendario motoGP 2007
newscorsi
FAQ & Domande
newscorsi
Web Designer gratuitoCorso Web Designer Gratuito per creare siti internet trucchi, consigli, esempi pratici e template per diventare un vero web designer.
Seo Extreme 2007
Al corso nazionale "Seo Extreme 2007" troverai le ultime tecniche e strategie di Posizionamento nei motori di ricerca. Parteciperai ad un corso di alto livello dedicato a chi vuole fare posizionamento...
libririviste
Web Design Facile"Web Design Facile" di Davide Vasta è una guida pratica che conduce il lettore, passo per passo attraverso la realizzazione di un sito Internet: dalla creazione di un prototipo da mostrare al cliente fino al suo sviluppo definitivo.
WebDesigner 22
Web Designer Magazine n.22. Flash in prima linea, conoscere l'ultima versione del programma Macromedia. Inserire video Flash nelle vostre pagine. In primo piano "diventare Designer di successo".
Web Marketing
Trucchi headlines efficaci 8Trucchi headlines efficaci 7
tagclouds
Insegnanti ed esperti corso PHP lez4 news n.9 - 18 Ottobre 2006 Annick Augier Art Blog Creare un sito Web Motore di ricerca news n.11 - 07 gennaio 2007 Pesci & Acquari Upload file WebDesign Music Site Pesci & Acquari Blog/Sito Giovanni Lombardo Logo omni-presente WebDesign Portfolio news 7 26.02.2006syndicate
RSS 2.0Atom feed
CreativeCommons
stampa l'articolo
segnala ad un amicoOrologio analogico in Javascript
[13 Mag 2005]Creare un orologio analogico, completo di lancette di ore, minuti e secondi perfettamente funzionante.
Pubblicato su Computer & Internet [mar 2003]
La particolarità? dell'esempio che proponiamo è che non fa uso di elementi particolari come applet Java o animazioni Flash, la funzionalità? dell'orologio sarà? completamente realizzata tramite codice JavaScript. Anche la componente grafica non è costituita da elementi particolari, ne' da immagini, sarà? tutto realizzato con il linguaggio HTML ed in modo estremamente compatto.
La pagina HTML
Vogliamo realizzare una funzione crea() da poter richiamare in qualsiasi punto della nostra pagina web. Questa funzione si occuperà? di creare gli elementi HTML dell'orologio analogico e di predisporne il funzionamento. Il movimento delle lancette sarà? gestito da una apposita funzione orologio(), che verrà? richiamata la prima volta alla fine del caricamento della pagina, poi sarà? essa stessa a impostare una nuova esecuzione di se stessa a distanza di un secondo.
Così facendo, il vero e proprio codice HTML della pagina di esempio che andremo a realizzare, si riduce ai minimi termini. Infatti all'interno del corpo della pagina andremo ad inserire solamente un blocco <DIV> e al suo interno richiameremo la funzione CREA.
<BODY ONLOAD="orologio()">
<div style="position:relative;width:30px;height:30px">
<SCRIPT LANGUAGE="JavaScript1.2">crea();</script>
</div>
</BODY></HTML>
Si è scelto di usare questo metodo in modo da rendere particolarmente semplice l'inserimento dell'oggetto orologio analogico all'interno di una pagina web di arbitraria complessità? e soprattutto già? esistente. Basterà? infatti creare un elemento <DIV> all'interno della propria pagina e al suo interno richiamare la funzione CREA. Addirittura, il codice JavaScript relativo alle funzioni crea() e orologio() potrà? essere inserito in un file a se stante, senza bisogno di inserirlo nella pagina stessa.
Elementi grafici
Come accennato nei precedenti paragrafi, tutti gli elementi grafici dell'orologio analogico, i numeri e le lancette, verranno ottenuti usando semplice codice HTML, senza utilizzare alcuna immagine. E per evitare all'utilizzatore un eccessivo lavoro di inserimento manuale del codice, è stata predisposta la funzione crea(), il cui scopo è appunto creare dinamicamente il codice HTML relativo agli elementi grafici.
Per quanto riguarda i classici numeri 3, 6, 9 e 12 disposti in croce, il concetto è abbastanza ovvio, dato che si tratta di elementi ottenibili semplicemente scrivendoli.
// Creazione e posizionamento dei numeri dell'orologio
txt1 = '<div class="num" style="position:absolute;top:15px;left:27px;">3</div>';
txt2 = '<div class="num" style="position:absolute;top:28px;left:15px;">6</div>';
txt3 = '<div class="num" style="position:absolute;top:15px;left:0px;">9</div>';
txt4 = '<div class="num" style="position:absolute;top:0px;left:12px;">12</div>';
document.write(txt1);
document.write(txt2);
document.write(txt3);
document.write(txt4);
Il codice sopra riportato non fa altro che generare un codice HTML che scrive i numeri 3, 6, 9 e 12 nelle classiche posizioni di un orologio.
Per quanto riguarda le lancette è stato utilizzato un metodo particolare. Poichà? le lancette ruotano, variando continuamente la propria inclinazione, sarebbe stato impossibile utilizzare l'immagine di una lancetta, dato che non sono disponibili funzioni JavaScript capaci di ruotare a piacere il contenuto di un'immagine. Si è quindi proceduto a realizzare ciascuna lancetta come composta da tanti puntini, ciascuno posizionato opportunamente in modo da ricostruire l'immagine di una lancetta ruotata di un angolo dato. Il puntino singolo è stato ottenuto semplicemente inserendo il carattere "punto" all'interno di un blocco <DIV>.
Vediamo più in dettaglio la realizzazione pratica: la lancetta delle ore sarà? composta da 6 di questi puntini (il cui posizionamento sarà? definito e spiegato in seguito), per cui occorrerà? generare all'interno del codice HTML altrettanti blocchi <DIV>.
La lancetta dei minuti, dovendo essere più lunga, sarà? invece composta da 8 puntini.
La lancetta dei secondi, dovendo apparire lunga e sottile, sarà? realizzata con 4 puntini distanziati tra di loro con uno spazio di dimensioni uguali al puntino stesso.
Gli elementi della lancetta dei secondi saranno identificati con i nomi da S1 a S4, quella dei minuti da M1 a M8 e quella delle ore da O1 a O6.
L'utilità? degli identificatori sarà? più chiara al momento di realizzare la rotazione delle lancette.
for (i=1;i<=4;i++){ // Secondi
txt = "<div id=s"+i+" style='position:absolute;' class='s'>.</div>";
document.write(txt);
}
for (i=1;i<=8;i++){ // Minuti
txt = "<div id=m"+i+" style='position:absolute;' class='m'>.</div>";
document.write(txt);
}
for (i=1;i<=6;i++){ // Ore
txt = "<div id=o"+i+" style='position:absolute;' class='o'>.</div>";
document.write(txt);
}
Questo codice genera i necessari blocchi <DIV>, proprio come quelli dei numeri dell'orologio, l'unica differenza è la presenza dell'identificatore.
Rotazione delle lancette
L'implementazione dell'orologio analogico prevede di realizzare la rotazione delle lancette di ore, minuti e secondi. Questo effetto di rotazione sarà? ottenuto riposizionando ogni secondo ciascuna delle lancette in base all'ora corrente. Il tutto sarà? implementato all'interno della funzione orologio(), vediamone i dettagli.
Per prima cosa creiamo un oggetto DATE.
time = new Date();
L'oggetto DATE mette a disposizione le funzioni GETSECONDS, GETMINUTES e GETHOURS, che permettono di leggere rispettivamente i secondi, i minuti e le ore correnti. In base a questi valori si calcolano le angolazione delle tre lancette, utilizzando le seguenti formule (si tralasciano i dettagli di trigonometria alla base di esse).
sec = -Math.PI/2+time.getSeconds()*Math.PI/30;
min = -Math.PI/2+Math.PI*time.getMinutes()/30;
hr = -Math.PI/2+Math.PI*time.getHours()/6+Math.PI*parseInt(time.getMinutes())/360;
L'unico dettaglio da osservare è che nel calcolo dell'angolazione della lancetta delle ore si sono utilizzati anche i minuti, perchà? usualmente negli orologi la lancetta delle ore si muove gradualmente da un'ora all'altra via via che passano i minuti. Se non avessimo tenuto conto dei minuti, la lancetta sarebbe rimasta ferma sulla rispettiva ora e avrebbe fatto uno scatto secco sull'ora successiva.
La rotazione si ottiene posizionando opportunamente ciascuno dei vari puntini che costituiscono le lancette, in modo da dare a ciascuna lancetta l'inclinazione definita da questi valori. Per fare questo, a ciascun elemento da S1 a S4, da M1 a M8 e da O1 a O6, riferiti attraverso la funzione GetElementById, si impostano i valori delle posizioni TOP e LEFT secondo le seguenti formule (si tralasciano anche in questo caso i dettagli di trigonometria).
// Posizionamento secondi
for (i=1;i<=4;i++){
document.getElementById('s'+i).style.top=12+i*3*Math.sin(sec);
document.getElementById('s'+i).style.left=15+i*3*Math.cos(sec);
}
// Posizionamento minuti
for (i=1;i<=8;i++){
document.getElementById('m'+i).style.top=12+i*Math.sin(min);
document.getElementById('m'+i).style.left=15+i*Math.cos(min);
}
// Posizionamento ore
for (i=1;i<=6;i++){
document.getElementById('o'+i).style.top=12+i*Math.sin(hr);
document.getElementById('o'+i).style.left=15+i*Math.cos(hr);
}
Infine programmiamo una nuova esecuzione della funzione OROLOGIO tra un secondo, in modo da aggiornare la posizione delle lancette e dare quindi l'effetto tipico di un orologio da polso. A questo scopo si utilizza la funzione SetTimeout.
setTimeout('orologio()',1000);
Ecco il risultato finale in funzione.
Questo articolo è indicizzato nelle prime pagine su Google con le chiavi di ricerca javascript orologio analogico.
