Kako stvoriti digitalni sat koristeći HTML, CSS i JavaScript

Digitalni sat jedan je od najboljih početničkih projekata u JavaScript-u. To je prilično lako naučiti za ljude bilo koje razine vještina.

U ovom ćete članku naučiti kako sami graditi digitalni sat pomoću HTML-a, CSS-a i JavaScript-a. Dobit ćete praktično iskustvo s raznim JavaScript konceptima poput stvaranja varijabli, korištenja funkcija, rada s datumima, pristupanja i dodavanja svojstava u DOM i još mnogo toga.

Započnimo.

Komponente digitalnog sata

Digitalni sat ima četiri dijela: sat, minuta, sekunda i meridiem.

Struktura mape projekta Digitalni sat

Stvorite korijensku mapu koja sadrži datoteke HTML, CSS i JavaScript. Datotekama možete dati imena kako god želite. Ovdje je imenovana korijenska mapa Digitalni sat. Prema standardnoj konvenciji imenovanja, HTML, CSS i JavaScript datoteke su imenovane index.html, stilovi.css, i script.js odnosno.

Dodavanje strukture digitalnom satu pomoću HTML-a

Otvori index.html datoteku i zalijepite sljedeći kod:

Evo, a div je stvoren s iskaznica od digitalni sat. Ovaj div koristi se za prikaz digitalnog sata pomoću JavaScript-a. stilovi.css vanjska je CSS stranica i povezana je s HTML stranicom pomoću a označiti. Slično tome, script.js vanjska je JS stranica i povezana je s HTML stranicom pomoću <skripta> označiti.

Dodavanje funkcionalnosti digitalnom satu pomoću JavaScript-a

Otvori script.js datoteku i zalijepite sljedeći kod:

funkcija Vrijeme () {
// Izrada objekta klase Date
var datum = novi datum ();
// Dobivanje trenutnog sata
var sat = datum.getHours ();
// Dobivanje trenutne minute
var minuta = datum.getMinutes ();
// Dobivanje trenutne sekunde
var drugo = datum.getSekunde ();
// Promjenjiva za pohranu AM / PM
var razdoblje = "";
// Dodjela AM / PM prema trenutnom satu
ako (sat> = 12) {
razdoblje = "PM";
} ostalo {
razdoblje = "AM";
}
// Pretvaranje sata u 12-satni format
if (sat == 0) {
sat = 12;
} ostalo {
ako (sat> 12) {
sat = sat - 12;
}
}
// Ažuriranje sata, minute i sekunde
// ako su manje od 10
sat = ažuriranje (sat);
minuta = ažuriranje (minuta);
drugo = ažuriranje (drugo);
// Dodavanje vremenskih elemenata u div
document.getElementById ("digitalni sat"). innerText = hour + ":" + minute + ":" + second + "" + period;
// Postavi tajmer na 1 sekundu (1000 ms)
setTimeout (Vrijeme, 1000);
}
// Funkcija ažuriranja vremenskih elemenata ako su manji od 10
// Dodajte 0 prije vremenskih elemenata ako su manji od 10
ažuriranje funkcije (t) {
ako je (t <10) {
povrat "0" + t;
}
inače {
povrat t;
}
}
Vrijeme();

Razumijevanje JavaScript koda

The Vrijeme() i ažuriranje() funkcije koriste se za dodavanje funkcionalnosti digitalnom satu.

Dobivanje trenutnih vremenskih elemenata

Da biste dobili trenutni datum i vrijeme, morate stvoriti objekt Date. Ovo je sintaksa za stvaranje objekta Date u JavaScript-u:

var datum = novi datum ();

Trenutni datum i vrijeme bit će pohranjeni u datum varijabilna. Sada trebate izdvojiti trenutni sat, minutu i sekundu iz objekta datuma.

date.getHours (), date.getMinutes (), i date.getSeconds () koriste se za dobivanje trenutnog sata, minute i sekunde iz objekta datuma. Svi vremenski elementi pohranjeni su u zasebne varijable za daljnje operacije.

var sat = datum.getHours ();
var minuta = datum.getMinutes ();
var drugo = datum.getSekunde ();

Dodjela trenutnog meridijema (AM / PM)

Budući da je Digitalni sat u 12-satnom formatu, trebate dodijeliti odgovarajući meridiem prema trenutnom satu. Ako je trenutni sat veći ili jednak 12, tada je meridiem PM (Post Meridiem), inače je AM (Ante Meridiem).

var razdoblje = "";
ako (sat> = 12) {
razdoblje = "PM";
} ostalo {
razdoblje = "AM";
}

Pretvaranje trenutnog sata u 12-satni format

Sada morate pretvoriti trenutni sat u 12-satni format. Ako je trenutni sat 0, tada se trenutni sat ažurira na 12 (prema 12-satnom formatu). Također, ako je trenutni sat veći od 12, smanjuje se za 12 da bi se održao usklađen s formatom vremena od 12 sati.

Povezano: Kako onemogućiti odabir teksta, izrezivanje, kopiranje, lijepljenje i desni klik na web stranici

if (sat == 0) {
sat = 12;
} ostalo {
ako (sat> 12) {
sat = sat - 12;
}
}

Ažuriranje vremenskih elemenata

Morate ažurirati vremenske elemente ako su manji od 10 (jednoznamenkasti). 0 dodaje se svim jednoznamenkastim vremenskim elementima (sat, minuta, sekunda).

sat = ažuriranje (sat);
minuta = ažuriranje (minuta);
drugo = ažuriranje (drugo);
ažuriranje funkcije (t) {
ako je (t <10) {
povrat "0" + t;
}
inače {
povrat t;
}
}

Dodavanje vremenskih elemenata u DOM

Prvo se DOM-u pristupa pomoću ID-a ciljnog div-a (digitalni sat). Tada se vremenski elementi dodjeljuju divu pomoću unutarnjiTekst seter.

document.getElementById ("digitalni sat"). innerText = hour + ":" + minute + ":" + second + "" + period;

Ažuriranje sata svake sekunde

Sat se ažurira svake sekunde pomoću setTimeout () metoda u JavaScript-u.

setTimeout (Vrijeme, 1000);

Stiliziranje digitalnog sata pomoću CSS-a

Otvori stilovi.css datoteku i zalijepite sljedeći kod:

Povezano: Kako se koristi CSS okvir-sjena: trikovi i primjeri

/ * Uvoz fontova Open Sans Condensed Google * /
@import url (' https://fonts.googleapis.com/css2?family=Open+Sans+Condensed: wght @ 300 & display = swap ');
#digitalni sat {
boja pozadine: # 66ffff;
širina: 35%;
marža: auto;
podmetač: 50px;
donji dio: 50px;
obitelj fontova: 'Open Sans Condensed', sans-serif;
veličina slova: 64px;
poravnanje teksta: središte;
sjena okvira: 0 4px 8px 0 rgba (0, 0, 0, 0.2), 0 6px 20px 0 rgba (0, 0, 0, 0.19);
}

Gornji CSS koristi se za oblikovanje digitalnog sata. Ovdje se za prikaz teksta sata koristi font Open Sans Condensed. Uvozi se iz Googleovih fontova pomoću @uvoz. The #digitalni sat selektor id koristi se za odabir ciljnog div-a. Selektor id koristi iskaznica atribut HTML elementa za odabir određenog elementa.

Povezano: Jednostavni primjeri CSS koda koje možete naučiti u 10 minuta

Ako želite pogledati cjeloviti izvorni kod korišten u ovom članku, ovdje je GitHub spremište. Također, ako želite pogledati verziju ovog projekta uživo, možete je provjeriti GitHub stranice.

Bilješka: Kôd korišten u ovom članku je MIT licenciran.

Razvijte druge JavaScript projekte

Ako ste početnik u JavaScriptu i želite biti dobar web programer, morate izraditi nekoliko dobrih projekata temeljenih na JavaScriptu. Oni mogu dodati vrijednost vašem životopisu, kao i vašoj karijeri.

Možete isprobati neke projekte poput Kalkulatora, igre vješala, Tic Tac Toe, JavaScript vremenske aplikacije, interaktivne odredišne ​​stranice, alata za pretvaranje težine, škara za papir, itd.

Ako tražite svoj sljedeći projekt zasnovan na JavaScriptu, jednostavan kalkulator izvrstan je izbor.

Kako izraditi jednostavan kalkulator pomoću HTML-a, CSS-a i JavaScript-a

Jednostavni proračunati kod je put kojim se ide prilikom programiranja. Provjerite kako izraditi vlastiti kalkulator u HTML-u, CSS-u i JS-u.

Pročitajte Dalje

O autoru