BytePost Brevi guide, dritti al punto!
BytePost
HTML&JS Programmazione

Creare un Orologio analogico – HTML&JS

di |Pubblicato

In questa guida della serie “Funzioni HTML&JS” ti spiegherò come creare e programmare un orologio analogico a lancette utilizzando l’HTML, CSS e JavaScript in pochi e semplici passaggi.

Programmare oggetti realmente esistenti è sempre un piacere, proprio come quello che potrai imparare a fare in questo articolo.

Abbiamo già visto come poter creare un orologio digitale funzionante in un altro articolo (che ti invito a leggere qui). Questa è la volta del suo antenato, l’orologio analogico a lancette.

Gli orologi analogici hanno sempre un loro fascino, non si può negare, e rimangono uno degli oggetti preferiti per imparare a programmare e a scoprire nuove utili funzioni.

orologio analogico in javascript

Per questo motivo, nel seguente post ti mostrerò passo per passo come poterne creare attraverso i linguaggi del web, HTML, CSS e JavaScript.

Se non sei interessato ad imparare a programmare l’orologio analogico, puoi trovare direttamente il codice sorgente in fondo alla pagina.

Programmare un orologio analogico in HTML e JavaScript

Programmare un orologio analogico, con le lancette che girano in base all’orario attuale (ora, minuti, secondi) è semplice, anche se bisogna prestare attenzione ad ogni passaggio in quanto le linee di codice sono molte.

Rispetto a molte altre guide simili, qui faremo molto uso anche del CSS, che ci servirà a stabilire correttamente la posizione di ciascun elemento (corpo e lancette).

Con JavaScript creeremo una funzione globale che servirà a far girare le lancette e a posizionarle in base all’orario corrente (compresi minuti e secondi).

L’unico elemento di cui avremo bisogno, necessariamente come risorsa esterna, è l’immagine con i numeri di sfondo (da 1 a 12). Può essere omessa a scelta.

Se non hai chiaro qualche passaggio non ti spaventare. Scrivici un commento e ti aiuteremo.

HTML

In questo passaggio costruiremo gli elementi HTML che compongono l’orologio. Ad ogni elemento attribuiremo una classe e un id (selettori) quando necessario.

  • Il corpo, dove saranno contenuti i numeri;
  • Lancetta corta dell’ora;
  • Lancetta dei minuti;
  • Lancetta lunga dei secondi;

Il codice:

<div class="orologio">
  <div class="ora">
      <div class="o" id="o"></div>
  </div>
    <div class="min">
      <div class="m" id="m"></div>
  </div>
    <div class="sec">
      <div class="s" id="s"></div>
  </div>
</div>

Come puoi notare dal codice, il corpo dell’oggetto ha un selettore classe chiamato “orologio“. Le tre sezioni seguenti sono per le lancette, rispettivamente con classe “ora“, “min” e “sec“;

Adesso è il momento di passare allo stile CSS.

CSS

Il CSS dell’orologio analogico rappresenta probabilmente il passaggio più complesso dell’intera guida.

Per ogni oggetto vanno stabilite tutte le caratteristiche corrispondenti, come: posizione; dimensioni e colori, compreso il comportamento dopo la rotazione di ogni lancetta.

.orologio{
  width:350px;
  height:350px;
  display:flex;
  justify-content:center;
  align-items:center; 
  background:url(
   https://www.byte-post.com/wp-content/uploads/2020/03/clock-number-only.png
  );
  background-size:cover;
  border:10px solid #000000;
  border-radius:50%;
  box-shadow: 0 15px 15px rgba(0,0,0,0.5);
}
.orologio:before{
  content:'';
  position:absolute;
  width:15px;
  height:15px;
  background:#000;
  border-radius:50%;
  z-index:100;
}

.orologio .ora, .orologio .min,  .orologio .sec {
  position:absolute;
}

.o {
  width:160px;
  height:160px;
}

.m {
  width:190px;
  height:190px;
}

.s {
  width:230px;
  height:230px;
}

.o, .m, .s {
  display:flex;
  justify-content:center;
  border-radius:50%;
}

.o:before {
  content:'';
  position:absolute;
  width: 8px;
  height:80px;
  background:red;
  border:1px solid rgb(166,0,0);
  z-index:8;
}

.m:before {
  content:'';
  position:absolute;
  width: 5px;
  height:90px;
  background:red;
  border:1px solid rgb(166,0,0);
  z-index:9;
}

.s:before {
  content:'';
  position:absolute;
  width: 2px;
  height:150px;
  border:1px solid rgb(166,0,0);
  background:red;
  z-index:10;
}

.o:before, .m:before, .s:before{
  box-shadow: 3px  3px 4px  rgba(0,0,0,0.24);
}

Il corpo dell’orologio ha come immagine di background un file dedicato, con la rappresentazione grafica dei numeri dell’orologio analogico da 1 a 12.

Puoi scaricarla qui:

solo numeri di un orologio analogico
Immagine-background-orologioScarica qui

Puoi anche copiare l’indirizzo dell’immagine se preferisci.

Tramite il codice CSS riportato qui sopra, puoi modificare i colori, le ombre e altri dettagli a tuo piacimento.

JavaScript

Ora non ci resta che definire il comportamento degli oggetti tramite JavaScript. Programmeremo la rotazione delle lancette basata sull’orario corrente, come un vero orologio.

La funzione verrà eseguita ad intervalli regolari di un secondo ciascuno.

Lo script:

  function time(){
  const deg = 6;
  const o = document.querySelector('#o');
  const m = document.querySelector('#m');
  const s = document.querySelector('#s');

    var gg = new Date();
    var oo = gg.getHours() * 30;
    var mm = gg.getMinutes() * deg;
    var ss = gg.getSeconds() * deg;

    o.style.transform = `rotateZ(${(oo)+(mm/12)}deg)`;
    m.style.transform = `rotateZ(${mm}deg)`;
    s.style.transform = `rotateZ(${ss}deg)`;
  }
window.setInterval(time, 1000);

Codice completo

Copia e incolla il codice completo HTML da incollare nella tua pagina web.

<style>
.orologio{
  width:350px;
  height:350px;
  display:flex;
  justify-content:center;
  align-items:center; 
  background:url(
    https://www.byte-post.com/wp-content/uploads/2020/03/clock-number-only.png
  );
  background-size:cover;
  border:10px solid #000000;
  border-radius:50%;
  box-shadow: 0 15px 15px rgba(0,0,0,0.3);
}
.orologio:before{
  content:'';
  position:absolute;
  width:15px;
  height:15px;
  background:#000;
  border-radius:50%;
  z-index:100;
}

.orologio .ora, .orologio .min,  .orologio .sec {
  position:absolute;
}

.o {
  width:160px;
  height:160px;
}

.m {
  width:190px;
  height:190px;
}

.s {
  width:230px;
  height:230px;
}

.o, .m, .s {
  display:flex;
  justify-content:center;
  border-radius:50%;
}

.o:before {
  content:'';
  position:absolute;
  width: 8px;
  height:80px;
  background:red;
  border:1px solid rgb(166,0,0);
  z-index:8;
}

.m:before {
  content:'';
  position:absolute;
  width: 5px;
  height:90px;
  background:red;
  border:1px solid rgb(166,0,0);
  z-index:9;
}

.s:before {
  content:'';
  position:absolute;
  width: 2px;
  height:150px;
  border:1px solid rgb(166,0,0);
  background:red;
  z-index:10;
}

.o:before, .m:before, .s:before{
  box-shadow: 3px  3px 4px  rgba(0,0,0,0.24);
}
</style>

<div class="orologio">
  <div class="ora">
      <div class="o" id="o"></div>
  </div>
    <div class="min">
      <div class="m" id="m"></div>
  </div>
    <div class="sec">
      <div class="s" id="s"></div>
  </div>
</div> 
 <script>
  function time(){
  const deg = 6;
  const o = document.querySelector('#o');
  const m = document.querySelector('#m');
  const s = document.querySelector('#s');
    var gg = new Date();
    var oo = gg.getHours() * 30;
    var mm = gg.getMinutes() * deg;
    var ss = gg.getSeconds() * deg;
    o.style.transform = `rotateZ(${(oo)+(mm/12)}deg)`;
    m.style.transform = `rotateZ(${mm}deg)`;
    s.style.transform = `rotateZ(${ss}deg)`;
  }
window.setInterval(time, 1000);
</script>

Risultato

Qui puoi osservare il risultato interattivo del codice completo.

Leggi anche: Creare un tasto mostra/nascondi password HTML&JS

Iscriviti alla nostra Newsletter qui e seguici su Facebook per aggiornamenti!

Articoli recenti:

AUTORE

Simone Bernardo
Appassionato da sempre del mondo informatico, di ogni sua sfaccettatura. Ideatore, creatore e gestore di BytePost fin dalla pubblicazione. Studio come autodidatta e non smetto mai di imparare cose nuove ed interessanti.

Potrebbe anche interessarti

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

CAPTCHA