Come creare un orologio digitale utilizzando HTML, CSS e JavaScript

L'orologio digitale è tra i migliori progetti per principianti in JavaScript. È abbastanza facile da imparare per persone di qualsiasi livello di abilità.

In questo articolo imparerai come costruire un tuo orologio digitale usando HTML, CSS e JavaScript. Avrai esperienza pratica con vari concetti JavaScript come la creazione di variabili, l'utilizzo di funzioni, l'utilizzo di date, l'accesso e l'aggiunta di proprietà al DOM e altro ancora.

Iniziamo.

Componenti dell'orologio digitale

L'orologio digitale ha quattro parti: ora, minuto, secondo e meridiano.

Struttura delle cartelle del progetto Orologio digitale

Crea una cartella principale che contenga i file HTML, CSS e JavaScript. Puoi nominare i file come vuoi. Qui si chiama la cartella principale Orologio digitale. Secondo la convenzione di denominazione standard, i file HTML, CSS e JavaScript sono denominati index.html, stili.css, e script.js rispettivamente.

Aggiungere struttura all'orologio digitale usando HTML

Apri il index.html file e incolla il seguente codice:

qui, a divi è creato con an id di orologio digitale. Questo div viene utilizzato per visualizzare l'orologio digitale utilizzando JavaScript. stili.css è una pagina CSS esterna ed è collegata alla pagina HTML utilizzando a etichetta. Allo stesso modo, script.js è una pagina JS esterna ed è collegata alla pagina HTML utilizzando il pulsante <sceneggiatura> etichetta.

Aggiunta di funzionalità all'orologio digitale utilizzando JavaScript

Apri il script.js file e incolla il seguente codice:

funzione Tempo() {
// Creazione oggetto della classe Date
var data = nuova data();
// Ottieni l'ora corrente
var ora = date.getHours();
// Ottieni il minuto corrente
var minute = date.getMinutes();
// Ottieni il secondo corrente
var secondo = date.getSeconds();
// Variabile da memorizzare AM / PM
var periodo = "";
// Assegnazione AM/PM in base all'ora corrente
if (ora >= 12) {
periodo = "PM";
} altro {
periodo = "AM";
}
// Conversione dell'ora in formato 12 ore
if (ora == 0) {
ora = 12;
} altro {
if (ora > 12) {
ora = ora - 12;
}
}
// Aggiornamento di ore, minuti e secondi
// se sono inferiori a 10
ora = aggiornamento (ora);
minuto = aggiornamento (minuto);
secondo = aggiornamento (secondo);
// Aggiunta di elementi temporali al div
document.getElementById("orologio digitale").innerText = ora + ": " + minuto + ": " + secondo + " " + punto;
// Imposta il timer su 1 sec (1000 ms)
setTimeout (Ora, 1000);
}
// Funzione per aggiornare gli elementi temporali se sono inferiori a 10
// Aggiunge 0 prima degli elementi temporali se sono inferiori a 10
aggiornamento della funzione (t) {
se (t < 10) {
restituisce "0" + t;
}
altro {
restituire t;
}
}
Tempo();

Comprendere il codice JavaScript

Il Tempo() e aggiornare() le funzioni vengono utilizzate per aggiungere funzionalità all'orologio digitale.

Ottenere gli elementi dell'ora corrente

Per ottenere la data e l'ora correnti, è necessario creare un oggetto Date. Questa è la sintassi per creare un oggetto Date in JavaScript:

var data = nuova data();

La data e l'ora correnti verranno memorizzate nel Data variabile. Ora devi estrarre l'ora, il minuto e il secondo correnti dall'oggetto data.

date.getHours(), date.getMinutes(), e date.getSeconds() vengono utilizzati per ottenere rispettivamente l'ora, i minuti e i secondi correnti dall'oggetto data. Tutti gli elementi temporali sono memorizzati in variabili separate per ulteriori operazioni.

var ora = date.getHours();
var minute = date.getMinutes();
var secondo = date.getSeconds();

Assegnazione del meridiano attuale (AM/PM)

Poiché l'orologio digitale è in formato 12 ore, è necessario assegnare il meridiano appropriato in base all'ora corrente. Se l'ora corrente è maggiore o uguale a 12, il meridiano è PM (Post Meridiem) altrimenti è AM (Ante Meridiem).

var periodo = "";
if (ora >= 12) {
periodo = "PM";
} altro {
periodo = "AM";
}

Conversione dell'ora corrente nel formato 12 ore

Ora devi convertire l'ora corrente in un formato di 12 ore. Se l'ora corrente è 0, l'ora corrente viene aggiornata a 12 (secondo il formato 12 ore). Inoltre, se l'ora corrente è maggiore di 12, viene ridotta di 12 per mantenerla allineata con il formato dell'ora a 12 ore.

Relazionato: Come disabilitare la selezione del testo, tagliare, copiare, incollare e fare clic con il pulsante destro del mouse su una pagina Web

if (ora == 0) {
ora = 12;
} altro {
if (ora > 12) {
ora = ora - 12;
}
}

Aggiornamento degli elementi temporali

È necessario aggiornare gli elementi temporali se sono inferiori a 10 (cifra singola). 0 viene aggiunto a tutti gli elementi temporali a una cifra (ora, minuto, secondo).

ora = aggiornamento (ora);
minuto = aggiornamento (minuto);
secondo = aggiornamento (secondo);
aggiornamento della funzione (t) {
se (t < 10) {
restituisce "0" + t;
}
altro {
restituire t;
}
}

Aggiunta degli elementi temporali al DOM

Innanzitutto, si accede al DOM utilizzando l'id del div di destinazione (orologio digitale). Quindi gli elementi temporali vengono assegnati al div usando il innerText setter.

document.getElementById("orologio digitale").innerText = ora + ": " + minuto + ": " + secondo + " " + punto;

Aggiornamento dell'orologio ogni secondo

L'orologio viene aggiornato ogni secondo utilizzando il setTimeout() metodo in JavaScript.

setTimeout (Ora, 1000);

Disegnare l'orologio digitale usando i CSS

Apri il stili.css file e incolla il seguente codice:

Relazionato: Come usare CSS box-shadow: trucchi ed esempi

/* Importazione del carattere Google Open Sans Condensed */
@import url(' https://fonts.googleapis.com/css2?family=Open+Sans+Condensed: wght@300&display=scambio');
#orologio digitale {
colore di sfondo: #66ffff;
larghezza: 35%;
margine: automatico;
imbottitura: 50px;
padding-bottom: 50px;
font-family: 'Open Sans Condensed', sans-serif;
dimensione del carattere: 64px;
allineamento del testo: centro;
box-shadow: 0 4px 8px 0 rgba (0, 0, 0, 0.2), 0 6px 20px 0 rgba (0, 0, 0, 0.19);
}

Il CSS di cui sopra viene utilizzato per lo stile dell'orologio digitale. Qui, il carattere Open Sans Condensed viene utilizzato per visualizzare il testo dell'orologio. È importato dai caratteri di Google utilizzando @importare. Il #orologio digitale selettore id viene utilizzato per selezionare il div di destinazione. Il selettore di ID usa il id attributo di un elemento HTML per selezionare un elemento specifico.

Relazionato: Semplici esempi di codice CSS che puoi imparare in 10 minuti

Se vuoi dare un'occhiata al codice sorgente completo utilizzato in questo articolo, ecco il Archivio GitHub. Inoltre, se vuoi dare un'occhiata alla versione live di questo progetto, puoi dare un'occhiata attraverso Pagine GitHub.

Nota: Il codice utilizzato in questo articolo è Licenza MIT.

Sviluppa altri progetti JavaScript

Se sei un principiante in JavaScript e vuoi essere un buon sviluppatore web, devi creare dei buoni progetti basati su JavaScript. Possono aggiungere valore al tuo curriculum e alla tua carriera.

Puoi provare alcuni progetti come Calculator, un gioco dell'impiccato, Tic Tac Toe, un'app meteo JavaScript, una landing page interattiva, uno strumento di conversione del peso, Rock Paper Scissors, ecc.

Se stai cercando il tuo prossimo progetto basato su JavaScript, una semplice calcolatrice è una scelta eccellente.

Come costruire una calcolatrice semplice utilizzando HTML, CSS e JavaScript

Il codice semplice e calcolato è la strada da percorrere durante la programmazione. Scopri come creare la tua calcolatrice in HTML, CSS e JS.

Leggi Avanti

Circa l'autore