Pubblicato il

ora

javascript

orologio

js

come mostrare l'ora con javascript e creare orologio digitale con JS
Ciao a tutti e benvenuti in questo nuovo mini tutorial dove vedremo come mostrare l’ora attuale con JavaScript. In questo tutorial andremo a vedere un metodo facile e veloce per mostrare ore, minuti e secondi in tempo reale utilizzando JavaScript.

Il codice per questo tutorial sarà scritto interamente in JavaScript e non farà uso di alcun framework o libreria.

Ecco il codice JS per mostrare l’ora, se siete interessati nella spiegazione potete continuare a leggere il post. Altrimenti potete semplicemente copiare ed incollare il codice.

var getTime = function(){
    var today = new Date();
    var h = today.getHours();
    var m = today.getMinutes();
    var s = today.getSeconds();
    h = this.checkTime(h);
    m = this.checkTime(m);
    s = this.checkTime(s);
    document.getElementById('hours').innerText = h;
    document.getElementById('minutes').innerText = m;
    document.getElementById('seconds').innerText = s;
    var t = setTimeout(this.getTime, 1000);
}
var checkTime = function(i) {
    if (i < 10) {i = "0" + i};
    return i;
}
getTime();


Come ottenere l’ora attuale in JavaScript

Prima di tutto vediamo come sia possibile ottenere l’ora attuale in JS.

Per ottenere l’ora attuale basta usare new Date()

Questa funzione ci restituisce un oggetto di data con varie proprietà come ore, minuti e secondi.

Come creare un orologio digitale in JavaScript

Come potete vedere il processo per mostrare l’ora in JS è diviso in 3 fasi:

  1. Ottenere ora attuale
  2. Formattare l'ora
  3. Assegnare l’ora a degli elementi HTML

Una volta che abbiamo ottenuto l’oggetto di data con new Date(), dobbiamo formattarla nel giusto formato. Se proviamo a stampare l’ora o il minuto proveniente dalla funzione getHours() o getMinutes(), possiamo vedere che il formato è un po’ strano, per esempio i numeri da 0 a 9 non hanno lo zero iniziale.

Per formattare meglio i numeri della data creiamo una funzione chiamata checkTime, la quale aggiunge uno zero iniziale ai numeri da 0 a 9.

In fine andiamo a creare tre div nella pagina index.html con id di: hours, minutes, seconds
Una volta creati questi div possiamo selezionarli con JS usando la funzione getElementByID() e settare il loro testo. 

<!DOCTYPE html>
<html>
<head>
<title>Test App</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <h1 id="hours">22</h1>
    <h1 id="minutes">30</h1>
    <h1 id="seconds">55</h1>
    <script type="text/javascript" src="app.js"></script>
</body>
</html>


ora non ci rimane altro che chiamare la funzione principale getTime() per iniziare il processo di orologio in JavaScript.

Ci siamo, ora siete in grado di mostrare l’ora attuale con JS per creare un orologio digitale nel browser. Se avete problemi con il codice o avete bisogno di una spiegazione più dettagliata commentate e risponderò subito 

Grazie e ci vediamo alla prossima 

Se hai una domanda puoi chiedere qualsiasi cosa nei commenti in basso

Grazie per aver letto questa guida su Devnews.it

Spero ti sia stata utile in qualche modo. Ti prego di supportare questa pagina mettendo mi piace alle nostre pagine social cliccando un basso, dove pubblichiamo regolermente notizie, tutorial e fatti curiosi sull'informatica. Grazie e ci vediamo alla prossima :)

Devnews

Devnews