Kako izraditi digitalni sat pomoću HTML -a, CSS -a i JavaScript -a

Kako izraditi digitalni sat pomoću HTML -a, CSS -a i JavaScript -a

Digitalni sat jedan je od najboljih projekata početnika u JavaScriptu. Lako je naučiti za ljude bilo koje razine vještine.





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



vt-x omogućen, ali ne radi

Započnimo.



Komponente digitalnog sata

Digitalni sat ima četiri dijela: sat, minutu, sekundu i meridiem.

Struktura mapa projekta Digitalni sat

Izradite korijensku mapu koja sadrži HTML, CSS i JavaScript datoteke. Datotekama možete dati ime kako god želite. Ovdje se naziva korijenska mapa Digitalni sat . Prema standardnoj konvenciji imenovanja, HTML, CSS i JavaScript datoteke se imenuju 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:





Digital Clock Using JavaScript






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



Dodavanje funkcionalnosti digitalnom satu pomoću JavaScripta

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

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();

Razumijevanje JavaScript koda

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



Dobivanje elemenata trenutnog vremena

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

var date = new Date();

Trenutni datum i vrijeme bit će pohranjeni u datum promjenjivo. Sada morate 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 od objekta datuma. Svi vremenski elementi pohranjeni su u zasebne varijable za daljnje operacije.

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

Dodjeljivanje trenutnog podneva (AM/PM)

Budući da je digitalni sat u 12-satnom formatu, morate 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 period = '';
if (hour >= 12) {
period = 'PM';
} else {
period = '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 kako bi bio usklađen s 12-satnim formatom vremena.

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

if (hour == 0) {
hour = 12;
} else {
if (hour > 12) {
hour = hour - 12;
}
}

Ažuriranje vremenskih elemenata

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

hour = update(hour);
minute = update(minute);
second = update(second);
function update(t) {
if (t <10) {
return '0' + t;
}
else {
return t;
}
}

Dodavanje vremenskih elemenata u DOM

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

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

Ažuriranje sata svake sekunde

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

setTimeout(Time, 1000);

Stiliziranje digitalnog sata pomoću CSS -a

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

Povezano: Kako koristiti CSS okvir-sjenu: trikovi i primjeri

/* 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);
}

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

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

Ako želite pogledati potpuni izvorni kod koji se koristi u ovom članku, evo Spremište GitHub . Također, ako želite pogledati live verziju ovog projekta, možete je provjeriti GitHub stranice .

Bilješka : Kôd koji se koristi u ovom članku je MIT licenciran .

Razvijte druge JavaScript projekte

Ako ste početnik u JavaScript-u i želite biti dobar web programer, morate izgraditi neke dobre projekte zasnovane na JavaScript-u. Oni mogu dodati vrijednost vašem životopisu, ali 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.

kako automatski proslijediti e -poštu od određenog pošiljatelja u gmailu

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

Udio Udio Cvrkut E -pošta Kako izgraditi jednostavan kalkulator pomoću HTML -a, CSS -a i JavaScript -a

Jednostavan, izračunati kôd način je na koji se može poslužiti pri programiranju. Provjerite kako izgraditi vlastiti kalkulator u HTML -u, CSS -u i JS -u.

Pročitajte Dalje Povezane teme O autoru Yuvraj Chandra(Objavljeno 60 članaka)

Yuvraj je student preddiplomskog studija Računarstva na Sveučilištu u Delhiju u Indiji. Oduševljen je Full Stack web razvojem. Kad ne piše, istražuje dubinu različitih tehnologija.

Više od Yuvraja Chandre

Pretplatite se na naše obavijesti

Pridružite se našem biltenu za tehničke savjete, recenzije, besplatne e -knjige i ekskluzivne ponude!

Kliknite ovdje za pretplatu