Creare un orologio analogico in Javascript usando webkit

In questo articolo vi spiegherò come creare un orologio analogico in Javascript e, a differenza dell’orologio analogico che trovate in questo articolo, questo utilizza il codice css webkit per ruotare le lancette.

Il seguente codice è codice CSS e serve per definire lo stile della pagina web.

<style type="text/css">
.all {
    background-color: transparent;
    background-repeat: no-repeat;
    position:absolute;
    width:256px;
    height:256px;
}
</style>

Gli attributi z-index servono per definire la sovrapposizione dei vari elementi html. In questo caso il valore 0 è attribuito allo sfondo dell’orologio mentre i valori maggiori di 0 sono attribuiti alle lancette che stanno sopra l’immagine di sfondo, inoltre, la lancetta dei minuti si sovrappone a sua volta a quella delle ore, la lancetta dei secondi invece a quella dei minuti e, di conseguenza anche a quella delle ore, poichè ha come valore z-index maggiore delle altre lancette ovvero 3.

<div style="position: absolute;">
<div style="background-image: url('./Clock.png'); z-index:0;"></div>
<div style="background-image: url('./center.png'); z-index:4;"></div>
<div id="ore" style="background-image: url('./Ore.png'); z-index:1;"></div>
<div id="minuti" style="background-image: url('./Minuti.png'); z-index:2;"></div>
<div id="secondi"style="background-image: url('./Secondi.png'); z-index:3;"></div>
</div>

Il seguente codice Javascript definisce la funzione change_time() che aggiorna la posizione delle lancette. Praticamente modifica l’inclinazione dell’immagine modificando il valore -webkit-transform (un attributo CSS), purtroppo l’attributo CSS per definire la rotazione dell’immagine è diverso da browser a browser.

<script type="text/javascript">
function change_time()
{
    var d = new Date();
    document.getElementById('secondi').style.MozTransform='rotate('+d.getSeconds()*6+'deg)'; // Firefox
    document.getElementById('secondi').style['-webkit-transform']='rotate('+d.getSeconds()*6+'deg)'; // Safari & Chrome
    document.getElementById('secondi').style['-o-transform']='rotate('+d.getSeconds()*6+'deg)'; // Opera
    document.getElementById('secondi').style['-ms-transform']='rotate('+d.getSeconds()*6+'deg)'; // Internet Explorer 9

    document.getElementById('minuti').style.MozTransform='rotate('+(d.getMinutes()*6)+'deg)';
    document.getElementById('minuti').style['-webkit-transform']='rotate('+d.getMinutes()*6+'deg)';
    document.getElementById('minuti').style['-o-transform']='rotate('+d.getMinutes()*6+'deg)';
    document.getElementById('minuti').style['-ms-transform']='rotate('+d.getMinutes()*6+'deg)';

    document.getElementById('ore').style.MozTransform='rotate('+d.getHours()*30+'deg)';
    document.getElementById('ore').style['-webkit-transform']='rotate('+d.getHours()*30+'deg)';
    document.getElementById('ore').style['-o-transform']='rotate('+d.getHours()*30+'deg)';
    document.getElementById('ore').style['-ms-transform']='rotate('+d.getHours()*30+'deg)';
}
setInterval("change_time()", 500);
</script>

La funzione setInterval richiama ogni 500 millisecondi la funzione change_time() in modo tale da aggiornare ogni mezzo secondo la posizione dele lancette.
Download Orologio

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

– Come creare un cronometro in Javascript

– Come realizzare uno slider di immagini con dissolvenza in Javascript

– Creare una calcolatrice in Javascript