Creare un orologio analogico e digitale in Javascript

In questo articolo vi spiegherò come creare un orologio sia digitale che analogico in Javascript utilizzando per le lancette dell’orologio una sequenza di immagini. Ma iniziamo ad esaminare la struttura html del nostro orologio.

<center>
<p>
<span id=”orario” style=” background-color: black; border: 1px solid #00ff00;”>
<script type=”text/javascript”>
document.write(d.getHours()+”:”+d.getMinutes()+”:”+d.getSeconds());
</script>
</span>
</p>

Come avrete notato c’è un codice javascript anche qui, lo span che contiene il tag script ha id orario che verrà modificato dopo, il motivo per cui ho messo quel codice è perchè lo span viene aggiornato e modificato dopo mezzo secondo che si carica la pagina (cioè 500 millisecondi specifico poichè il codice setTimeout, che vedremo più avanti, utilizza i millisecondi e non i secondi). Il codice style dentro ogni tag è CSS serve a non far ripetere l’ immagine di sfondo se lo sfondo è più grande dell’ immagine assegnata.

<table background=”./Clock.png” style=”background-repeat: no-repeat; background-position: center; width:64px; height:64px;”>
<tr id=”ora” style=”background-repeat: no-repeat; background-position: center;”>
<td id=”minuti” style=”background-repeat: no-repeat; background-position: center;”><center><span id=”clock”></span></center></td>
</tr>
</table>
</center>

Qui come potrete vedere quasi ogni tag ha un immagine assegnata. Il tag table ha assegnato il background primario che è l’ orologio senza lancette, mentre i tag tr e td (da notare che il tag td ha assegnato 2 immagini una attraverso il codice background=”immagine.png” e l’ altra dentro esso con il tag ) contengono le lancette che possiamo distinguere dal nome degli id. Ma iniziamo ad analizzare il codice Javascript.

<script type=”text/javascrtip”>
var i=0;
while(i<61)
{
document.write(‘<img id=”‘+i+'” src=”./Secondi/Seconds’+i+’.png”></img>’);
document.getElementById(i).style.display=’none’;
i++;
}

Questo ciclo while serve a caricare prima le immagini della lancetta dei secondi.

function clock ()
{
var d = new Date();
var ore=d.getHours();
var minuti=d.getMinutes();
var secondi=d.getSeconds();

Qui dichiariamo le variabili e gli facciamo assumere il valore dei secondi, minuti e ore attuali.

if(ore<10){ore=”0″+d.getHours();}
if(d.getHours()<10){ore=”0″+d.getHours();}
if(d.getMinutes()<10){minuti=”0″+d.getMinutes();}
if(d.getSeconds()<10){secondi=”0″+d.getSeconds();}

Queste condizioni if servono a cambiare il valore delle variabili aggiungendo uno 0 prima del loro valore se il loro valore fosse minore di 10 e fosse formato da meno di un carattere.

var orario = ore+”:”+minuti+”:”+secondi;
document.getElementById(“orario”).innerHTML=orario;

Qui modifichiamo lo span dell’ orologio “digitale”.

if(ore>12){ore-=12;}
document.getElementById(‘ora’).style.backgroundImage=”url(‘./Ore/Ore”+ore+”.png’)”;

document.getElementById(‘minuti’).style.backgroundImage=”url(‘./Minuti/Minuti”+d.getMinutes()+”.png’)”;
document.getElementById(“clock”).innerHTML = ‘<img src=”./Secondi/Seconds’+d.getSeconds()+’.png”></img>’;

Qui assegnamo ai tag tr td e img i background cioè le immagini.

if(ore==0){document.getElementById(‘ora’).style.backgroundImage=”url(‘./Ore/Ore0.png’)”;}
if(d.getMinutes()==00){document.getElementById(‘minuti’).style.backgroundImage=”url(‘./Minuti/Minuti0.png’)”;}
if(d.getSeconds()==00){document.getElementById(“clock”).innerHTML = ‘<img src=”./Secondi/Seconds0.png”></img>’;}

Queste condizioni if servono ad assegnare delle immagini se una delle lancette raggiunge il numero 12 cioè fa un giro completo dell’ orologio.

setTimeout(“clock()”, 1000);
}
setTimeout(“clock()”, 500);
</script>

Alla fine della funzione clock aggiungiamo un codice setTimeout che richiama la stessa funzione in modo tale da creare un “ciclo” infinito che riaggiorna in continuazione ogni 1000 millisecondi cioè ogni secondo l’ orologio. Però come sappiamo le funzioni Javascript devono essere richiamate quindi mettiamo fuori dalla funzione un setTimeout che avvia la funzione clock dopo mezzo secondo che un utente carica la pagina.
Ecco l’ output del programma e il link del download delle immagini e della sorgente.

Download Orologio

Ti è piaciuto questo articolo? Allora ti piacerà anche:

– Come creare un cronometro in Javascript
– Creare un calendario in Javascript
– Come realizzare uno slider di immagini con dissolvenza in Javascript