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

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.



cum se pune parola pe unitatea flash USB

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, sunt denumite fișierele HTML, CSS și JavaScript 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:





Digital Clock Using JavaScript






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:

function Time() {
// Creating object of the Date class
var date = new Date();
// Get current hour
var hour = date.getHours();
// Get current minute
var minute = date.getMinutes();
// Get current second
var second = date.getSeconds();
// Variable to store AM / PM
var period = '';
// Assigning AM / PM according to the current hour
if (hour >= 12) {
period = 'PM';
} else {
period = 'AM';
}
// Converting the hour in 12-hour format
if (hour == 0) {
hour = 12;
} else {
if (hour > 12) {
hour = hour - 12;
}
}
// Updating hour, minute, and second
// if they are less than 10
hour = update(hour);
minute = update(minute);
second = update(second);
// Adding time elements to the div
document.getElementById('digital-clock').innerText = hour + ' : ' + minute + ' : ' + second + ' ' + period;
// Set Timer to 1 sec (1000 ms)
setTimeout(Time, 1000);
}
// Function to update time elements if they are less than 10
// Append 0 before time elements if they are less than 10
function update(t) {
if (t <10) {
return '0' + t;
}
else {
return t;
}
}
Time();

Înțelegerea codului JavaScript

The 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 date = new Date();

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 amiezii curente (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 (hour >= 12) {
period = 'PM';
} else {
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 să dezactivați selectarea textului, tăierea, copierea, lipirea și clicul dreapta pe o pagină web

if (hour == 0) {
hour = 12;
} else {
if (hour > 12) {
hour = hour - 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ă).

hour = update(hour);
minute = update(minute);
second = update(second);
function update(t) {
if (t <10) {
return '0' + t;
}
else {
return 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

/* Importing Open Sans Condensed Google font */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@300&display=swap');

#digital-clock {
background-color: #66ffff;
width: 35%;
margin: auto;
padding-top: 50px;
padding-bottom: 50px;
font-family: 'Open Sans Condensed', sans-serif;
font-size: 64px;
text-align: center;
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 . The #ceas digital selectorul id este utilizat pentru a selecta div. Selectorul 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ă Depozit 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.

cum să ștergeți copiile de rezervă ale mașinii de timp

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

Acțiune Acțiune Tweet E-mail 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 Subiecte asemănătoare Despre autor Yuvraj Chandra(60 de articole publicate)

Yuvraj este student la Universitatea din Delhi, India. Este pasionat de dezvoltarea web Full Stack. Când nu scrie, explorează profunzimea diferitelor tehnologii.

Mai multe de la Yuvraj Chandra

Aboneaza-te la newsletter-ul nostru

Alăturați-vă newsletter-ului pentru sfaturi tehnice, recenzii, cărți electronice gratuite și oferte exclusive!

Faceți clic aici pentru a vă abona