Cum să creați un ceas digital folosind HTML, CSS și JavaScript

Ceasul digital se numără printre cele mai bune proiecte pentru începători în JavaScript. Este destul de ușor de învățat pentru oameni de orice nivel de calificare.

În acest articol, veți învăța cum să creați un ceas digital propriu utilizând HTML, CSS și JavaScript. Veți avea experiență practică cu diverse concepte JavaScript, cum ar fi crearea de variabile, utilizarea funcțiilor, lucrul cu datele, accesarea și adăugarea de proprietăți la DOM și multe altele.

Să începem.

Componentele ceasului digital

Ceasul digital are patru părți: oră, minut, secundă și meridiem.

Structura folderului proiectului ceasului digital

Creați un folder rădăcină care conține fișierele HTML, CSS și JavaScript. Puteți denumi fișierele oricum doriți. Aici se numește folderul rădăcină Ceas digital. Conform convenției standard de denumire, fișierele HTML, CSS și JavaScript sunt denumite index.html, stiluri.css, și script.js respectiv.

Adăugarea unei structuri la ceasul digital folosind HTML

Deschide index.html fișier și lipiți următorul cod:

Aici, un div este creat cu un id de ceas digital. Această divizare este utilizată pentru a afișa ceasul digital folosind JavaScript. stiluri.css este o pagină CSS externă și este legată de pagina HTML folosind un etichetă. În mod similar, script.js este o pagină JS externă și este legată de pagina HTML folosind <script> etichetă.

Adăugarea funcționalității ceasului digital folosind JavaScript

Deschide script.js fișier și lipiți următorul cod:

funcție Timp () {
// Crearea obiectului clasei Date
var data = data nouă ();
// Obține ora curentă
var hour = date.getHours ();
// Obțineți minutul curent
var minute = date.getMinutes ();
// Obțineți secunda curentă
var second = date.getSeconds ();
// Variabil pentru stocarea AM / PM
var period = "";
// Atribuirea AM / PM în funcție de ora curentă
if (oră> = 12) {
period = "PM";
} altceva {
period = "AM";
}
// Conversia orei în format de 12 ore
if (ora == 0) {
ora = 12;
} altceva {
if (oră> 12) {
ora = ora - 12;
}
}
// Se actualizează ora, minutul și secunda
// dacă sunt mai mici de 10
ora = actualizare (ora);
minut = actualizare (minut);
al doilea = update (second);
// Adăugarea de elemente de timp la div
document.getElementById ("digital-clock"). innerText = hour + ":" + minute + ":" + second + "" + period;
// Setați temporizatorul la 1 sec (1000 ms)
setTimeout (Time, 1000);
}
// Funcția de actualizare a elementelor de timp dacă acestea sunt mai mici de 10
// Adăugați 0 înainte de elementele de timp dacă acestea sunt mai mici de 10
actualizare funcție (t) {
dacă (t <10) {
returnează „0” + t;
}
altceva {
retur t;
}
}
Timp();

Înțelegerea codului JavaScript

Timp() și Actualizați() funcțiile sunt utilizate pentru a adăuga funcționalitate ceasului digital.

Obținerea elementelor de timp curente

Pentru a obține data și ora curente, trebuie să creați un obiect Date. Aceasta este sintaxa pentru crearea unui obiect Date în JavaScript:

var data = data nouă ();

Data și ora curente vor fi stocate în Data variabil. Acum trebuie să extrageți ora, minutul și secunda curente din obiectul de dată.

date.getHours (), date.getMinutes (), și date.getSeconds () sunt folosite pentru a obține ora curentă, minutul și respectiv secunda din obiectul dată. Toate elementele de timp sunt stocate în variabile separate pentru operațiuni ulterioare.

var hour = date.getHours ();
var minute = date.getMinutes ();
var second = date.getSeconds ();

Atribuirea Meridiemului curent (AM / PM)

Deoarece ceasul digital este într-un format de 12 ore, trebuie să atribuiți meridiemul corespunzător în funcție de ora curentă. Dacă ora curentă este mai mare sau egală cu 12, atunci meridiemul este PM (Post Meridiem) în caz contrar, este AM (Ante Meridiem).

var period = "";
if (oră> = 12) {
period = "PM";
} altceva {
period = "AM";
}

Conversia orei curente în format de 12 ore

Acum trebuie să convertiți ora curentă într-un format de 12 ore. Dacă ora curentă este 0, atunci ora curentă este actualizată la 12 (conform formatului de 12 ore). De asemenea, dacă ora curentă este mai mare de 12, este redusă cu 12 pentru a o menține aliniată cu formatul de timp de 12 ore.

Legate de: Cum se dezactivează selectarea textului, tăierea, copierea, lipirea și clicul dreapta pe o pagină web

if (ora == 0) {
ora = 12;
} altceva {
if (oră> 12) {
ora = ora - 12;
}
}

Actualizarea elementelor de timp

Trebuie să actualizați elementele de timp dacă acestea sunt mai mici de 10 (o singură cifră). 0 este atașat la toate elementele de timp dintr-o singură cifră (oră, minut, secundă).

ora = actualizare (ora);
minut = actualizare (minut);
al doilea = update (second);
actualizare funcție (t) {
dacă (t <10) {
returnează „0” + t;
}
altceva {
retur t;
}
}

Adăugarea elementelor de timp la DOM

Mai întâi, DOM-ul este accesat utilizând ID-ul divului țintă (ceas digital). Apoi elementele de timp sunt atribuite divului folosind text interior setter.

document.getElementById ("digital-clock"). innerText = hour + ":" + minute + ":" + second + "" + period;

Actualizarea ceasului în fiecare secundă

Ceasul este actualizat în fiecare secundă folosind setTimeout () metodă în JavaScript.

setTimeout (Time, 1000);

Stilizarea ceasului digital folosind CSS

Deschide stiluri.css fișier și lipiți următorul cod:

Legate de: Cum se folosește CSS box-shadow: Trucuri și exemple

/ * Importarea fontului Google Open Sans Condensed * /
@ import url (' https://fonts.googleapis.com/css2?family=Open+Sans+Condensed: wght @ 300 & display = swap ');
#ceas digital {
culoare de fundal: # 66ffff;
lățime: 35%;
margine: auto;
tapițerie: 50px;
fund de umplutură: 50 px;
font-family: „Deschideți fără condensare”, sans-serif;
dimensiunea fontului: 64px;
text-align: centru;
box-shadow: 0 4px 8px 0 rgba (0, 0, 0, 0.2), 0 6px 20px 0 rgba (0, 0, 0, 0.19);
}

CSS de mai sus este folosit pentru a stiliza ceasul digital. Aici, fontul Open Sans Condensed este utilizat pentru a afișa textul ceasului. Este importat din fonturi Google folosind @import. #ceas digital selectorul id este utilizat pentru a selecta div. Selectorul de id folosește id atributul unui element HTML pentru a selecta un anumit element.

Legate de: Exemple de cod CSS simple pe care le puteți învăța în 10 minute

Dacă doriți să aruncați o privire la codul sursă complet utilizat în acest articol, iată Depozitul GitHub. De asemenea, dacă doriți să aruncați o privire la versiunea live a acestui proiect, o puteți verifica prin Pagini GitHub.

Notă: Codul utilizat în acest articol este Licențiat MIT.

Dezvoltă alte proiecte JavaScript

Dacă sunteți începător la JavaScript și doriți să fiți un dezvoltator web bun, trebuie să construiți câteva proiecte bune bazate pe JavaScript. Ele pot adăuga valoare CV-ului, precum și carierei tale.

Puteți încerca câteva proiecte precum Calculator, un joc Hangman, Tic Tac Toe, o aplicație JavaScript pentru vreme, o pagină de destinație interactivă, un instrument de conversie a greutății, foarfece de hârtie rock etc.

Dacă sunteți în căutarea următorului dvs. proiect bazat pe JavaScript, un calculator simplu este o alegere excelentă.

Cum să construiți un calculator simplu folosind HTML, CSS și JavaScript

Codul simplu și calculat este calea de urmat atunci când programați. Vedeți cum să vă construiți propriul calculator în HTML, CSS și JS.

Citiți în continuare

Despre autor