Kako ustvariti digitalno uro z uporabo HTML, CSS in JavaScript

Kako ustvariti digitalno uro z uporabo HTML, CSS in JavaScript

Digitalna ura je med najboljšimi projekti za JavaScript v JavaScript. Za ljudi katere koli stopnje znanja se je zelo enostavno naučiti.





V tem članku se boste naučili, kako z uporabo HTML, CSS in JavaScript izdelati lastno digitalno uro. Pridobili boste praktične izkušnje z različnimi koncepti JavaScript, kot so ustvarjanje spremenljivk, uporaba funkcij, delo z datumi, dostopanje in dodajanje lastnosti v DOM itd.



Windows 10 izklopi bližnjico do zaslona

Začnimo.





Sestavni deli digitalne ure

Digitalna ura ima štiri dele: uro, minuto, sekundo in meridiem.

Struktura map projekta Digitalna ura

Ustvarite korensko mapo, ki vsebuje datoteke HTML, CSS in JavaScript. Datoteke lahko poimenujete, kar želite. Tu se imenuje korenska mapa Digitalna ura . V skladu s standardno konvencijo poimenovanja so datoteke HTML, CSS in JavaScript poimenovane index.html , styles.css , in script.js oz.



Dodajanje strukture digitalni uri z uporabo HTML

Odprite index.html datoteko in prilepite naslednjo kodo:





Digital Clock Using JavaScript






Tukaj, a div je ustvarjen z id od digitalna ura . Ta div se uporablja za prikaz digitalne ure z uporabo JavaScript. styles.css je zunanja stran CSS in je povezana s stranjo HTML s pomočjo oznaka. Podobno, script.js je zunanja stran JS in je povezana s stranjo HTML s pomočjo < skript> oznaka.



Dodajanje funkcionalnosti digitalni uri z uporabo JavaScripta

Odprite script.js datoteko in prilepite naslednjo kodo:

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

Razumevanje kode JavaScript

The Čas () in nadgradnja() funkcije se uporabljajo za dodajanje funkcionalnosti digitalni uri.



Pridobivanje elementov trenutnega časa

Če želite dobiti trenutni datum in čas, morate ustvariti objekt Date. To je sintaksa za ustvarjanje predmeta Date v JavaScript:

var date = new Date();

Trenutni datum in čas bosta shranjena v datum spremenljivka. Zdaj morate iz predmeta datuma izvleči trenutno uro, minuto in sekundo.

date.getHours () , date.getMinutes (), in date.getSeconds () se uporabljajo za pridobivanje trenutne ure, minute in sekunde iz predmeta datuma. Vsi časovni elementi so shranjeni v ločenih spremenljivkah za nadaljnje operacije.

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

Dodelitev trenutnega poldneva (AM/PM)

Ker je digitalna ura v 12-urnem formatu, morate dodeliti ustrezen meridiem glede na trenutno uro. Če je trenutna ura večja ali enaka 12, je meridiem PM (Post Meridiem), sicer pa AM (Ante Meridiem).

var period = '';
if (hour >= 12) {
period = 'PM';
} else {
period = 'AM';
}

Pretvorba trenutne ure v 12-urno obliko

Zdaj morate pretvoriti trenutno uro v 12-urno obliko. Če je trenutna ura 0, se trenutna ura posodobi na 12 (v skladu z 12-urno obliko). Če je trenutna ura večja od 12, se zmanjša za 12, da ostane usklajena z 12-urno obliko zapisa časa.

Povezano: Kako onemogočiti izbiro besedila, izrezovanje, kopiranje, lepljenje in desni klik na spletni strani

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

Posodabljanje časovnih elementov

Časovne elemente morate posodobiti, če so manjši od 10 (enomestno). 0 je dodan vsem enomestnim časovnim elementom (ura, minuta, sekunda).

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

Dodajanje časovnih elementov v DOM

Prvič, do DOM dostopamo z ID -jem ciljnega divja ( digitalna ura ). Nato so časovni elementi dodeljeni div z uporabo innerText nastavitelj.

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

Vsako sekundo posodobite uro

Ura se vsako sekundo posodobi z uporabo setTimeout () metodo v JavaScript.

setTimeout(Time, 1000);

Oblikovanje digitalne ure z uporabo CSS

Odprite styles.css datoteko in prilepite naslednjo kodo:

Povezano: Kako uporabljati CSS box-shadow: triki in primeri

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

Zgornji CSS se uporablja za oblikovanje digitalne ure. Tu se pisava Open Sans Condensed uporablja za prikaz besedila ure. Uvožen je iz Googlovih pisav z uporabo @uvoz . The #digitalna ura izbirnik id se uporablja za izbiro ciljnega div. Izbirnik ID uporablja datoteko id atribut elementa HTML za izbiro določenega elementa.

Povezano: Preprosti primeri kode CSS, ki se jih lahko naučite v 10 minutah

Če si želite ogledati celotno izvorno kodo, uporabljeno v tem članku, je tukaj Skladišče GitHub . Če si želite ogledati tudi živo različico tega projekta, jo lahko preverite Strani GitHub .

Opomba : Koda, uporabljena v tem članku, je Z licenco MIT .

Razvijte druge projekte JavaScript

Če ste začetnik JavaScripta in želite biti dober spletni razvijalec, morate zgraditi nekaj dobrih projektov, ki temeljijo na JavaScript. Lahko dodajo vrednost vašemu življenjepisu in vaši karieri.

Preizkusite lahko nekatere projekte, kot so Kalkulator, igra Hangman, Tic Tac Toe, vremenska aplikacija JavaScript, interaktivna ciljna stran, orodje za pretvorbo teže, škarje za papir itd.

kako očistiti opraskan disk

Če iščete svoj naslednji projekt, ki temelji na JavaScript, je preprost kalkulator odlična izbira.

Deliti Deliti Cvrkutati E-naslov Kako zgraditi preprost kalkulator z uporabo HTML, CSS in JavaScript

Pri programiranju je preprosta, izračunana koda. Preverite, kako sestavite svoj kalkulator v HTML, CSS in JS.

Preberite Naprej Sorodne teme O avtorju Yuvraj Chandra(Objavljenih 60 člankov)

Yuvraj je dodiplomski študent računalništva na Univerzi v Delhiju v Indiji. Navdušen je nad spletnim razvojem Full Stack. Ko ne piše, raziskuje globino različnih tehnologij.

Več od Yuvraja Chandre

Naročite se na naše novice

Pridružite se našemu glasilu za tehnične nasvete, ocene, brezplačne e -knjige in ekskluzivne ponudbe!

Kliknite tukaj, da se naročite