Creare un Orologio Digitale in JavaScript

Indice dei contenuti

In questo post della serie “Funzioni HTML&JS” descriverò come poter creare un orologio digitale continuo programmando con JavaScript all’interno di una pagina web HTML.

L’orologio che andremo a programmare è una versione digitale con l’ora, minuti e secondi attuali, con un formato comune “00:00:00” e in continuo aggiornamento, come quello di una classica sveglia digitale o un orologio da polso.

Per riuscire a seguire questa guida non sono necessarie conoscenze di JavaScript, infatti per integrare il codice nel tuo sito web ti basterà copiarlo qui in basso e incollarlo nella pagina interessata.

Ti consiglio però di avere un minimo di conoscenza di base di HTML e CSS per l’integrazione ed eventuale modifica dello stile. Inoltre questa guida/tutorial ti aiuterà a comprendere JavaScript e ad approfondire l’argomento qualora tu lo stessi studiando.

Puoi trovare a questi link i nostri corsi gratuiti di HTML/CSS e di JavaScript.

Programmare un orologio digitale in JavaScript

Per creare un orologio in versione digitale utilizzando JavaScript, faremo uso di poche righe di codice sfruttando il noto metodo “getDate()” che è il principale responsabile della generazione di dati riguardo date, anni, mesi, giorni, ore, minuti e secondi.

Non daremo approfondimenti su getDate in questo testo, ma puoi sempre leggere l’articolo dedicato del nostro corso JavaScript […].

Proprio grazie a questo metodo potremmo richiamare le informazioni attuali riguardo l’orario e mostrare a video con un intervallo di aggiornamento ogni secondo.

A fine articolo inoltre, ti mostrerò come modificare l’aspetto esteriore dell’orologio per darti una base su cui lavorare attraverso l’uso del CSS.

In futuro potrai facilmente integrare anche la data (giorno-mese-anno). Per questo segui la guida apposita[…].

Il codice

Qui in basso è riportato il codice HTML e JavaScript dell’orologio digitale.

<!-- codice JavaScript -->
<script>
  window.onload = setInterval(Orologio,1000);
  function addZero(i) {
  if (i < 10) {
    i = "0" + i;
  }
  return i;
  }
  function Orologio()
  {
    var d = new Date();
    var date = d.getDate();
    var ora = addZero(d.getHours());
    var min = addZero(d.getMinutes());
    var sec = addZero(d.getSeconds());
    document.getElementById("orologio").innerHTML=ora+":"+min+":"+sec;
  }
</script>

<!-- riga di codice HTML -->
<p id="orologio"></p>

Esaminiamo ora il codice:

Nel tag <script> è inserito il codice JavaScript per il funzionamento dell’orologio. La prima riga indica che al caricamento della pagina dovrà avvenire un aggiornamento continuo della funzione “Orologio()” ogni 1000 ms (millisecondi), cioè ogni secondo.
La funzione “addZero()” farà sì che il formato dell’orario sia il classico “00:00:00”, aggiungendo uno zero (0) nel caso di unità singole da 1 a 9 (senza questa funzione l’orario verrebbe visualizzato “22:3:9” invece di “22:03:09”.
La funzione “Orologio()” viene creata generando l’ora, i minuti e i secondi attuali. Questi dati verranno poi visualizzati nell’elemento HTML con ID “orologio“.
L’ultima riga è un comune elemento <p> di codice HTML. Questo elemento ha come ID “orologio” ed è quello su cui agirà il nostro script JS.

Risultato

Per motivi tecnici, il risultato dello script non sarà del tutto fedele a quello descritto in precedenza, ma ci limiteremo a mostrare l’ora, i minuti e secondi al momento del caricamento di questa pagina.

Copiando il codice JavaScript del capitolo precedente, l’orario verrà aggiornato automaticamente ogni secondo e non rimarrà fisso come quello che vedi qui in alto.

Prova a copiare il codice nel nostro editor HTML online gratuito codewith.it per vedere il risultato reale.

Aggiunta CSS (Stile)

L’orologio digitale programmato manca di stile, funziona correttamente ma è soltanto una scritta nera su sfondo bianco come un normale testo.

Possiamo aggiungere un tocco di CSS per renderlo più gradevole alla vista e personalizzarlo nei minimi dettagli.

Come ad esempio questo:

Il codice utilizzato:

<link href='https://fonts.googleapis.com/css?family=Orbitron' rel='stylesheet' type='text/css'>
<script>
  window.onload = setInterval(Orologio,1000);
  function addZero(i) {
  if (i < 10) {
    i = "0" + i;
  }
  return i;
  }
  function Orologio()
  {
    var d = new Date();
    var date = d.getDate();
    var ora = addZero(d.getHours());
    var min = addZero(d.getMinutes());
    var sec = addZero(d.getSeconds());
    document.getElementById("orologio").innerHTML=ora+":"+min+":"+sec;
  }
</script>

<b><p class="has-text-align-center" id="orologio" style="font-family: 'Orbitron', sans-serif; color:red; font-size:20pt; background-color:#3D51C1; padding:10px; border-radius:10px;  width:fit-content;"></p></b>

Non ti resta ora che personalizzare il tuo orologio JavaScript con lo stile che preferisci modificando il CSS inline scritto, oppure integrare un foglio di stile esterno. Lasciaci un commento se l'articolo ti è piaciuto.

Potrebbe interessarti anche: Come programmare una calcolatrice con JavaScript

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

Articoli recenti: