Kako ustvariti digitalno uro z uporabo HTML, CSS in JavaScript

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

V tem članku boste izvedeli, kako sami ustvariti digitalno uro z uporabo HTML, CSS in JavaScript. Dobili boste praktične izkušnje z različnimi koncepti JavaScript, kot so ustvarjanje spremenljivk, uporaba funkcij, delo z datumi, dostop in dodajanje lastnosti v DOM itd.

Začnimo.

Sestavni deli digitalne ure

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

Struktura map v projektu Digitalna ura

Ustvarite korensko mapo, ki vsebuje datoteke HTML, CSS in JavaScript. Datotekam lahko poimenujete karkoli želite. Tu je poimenovana korenska mapa Digitalna ura. V skladu s standardno konvencijo o poimenovanju so datoteke HTML, CSS in JavaScript poimenovane index.html, styles.css, in script.js oz.

Dodajanje strukture digitalni uri z uporabo HTML-ja

Odprite index.html datoteko in prilepite naslednjo kodo:

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 z uporabo <skript> oznaka.

Dodajanje funkcionalnosti digitalni uri z uporabo JavaScripta

Odprite script.js datoteko in prilepite naslednjo kodo:

funkcija Čas () {
// Ustvarjanje predmeta razreda Date
var datum = nov datum ();
// Pridobite trenutno uro
var ura = datum.getHours ();
// Pridobite trenutno minuto
var minute = date.getMinutes ();
// Pridobite trenutno sekundo
var second = date.getSeconds ();
// Spremenljivka za shranjevanje AM / PM
var period = "";
// Dodelitev AM / PM glede na trenutno uro
če (ura> = 12) {
obdobje = "PM";
} še {
obdobje = "AM";
}
// Pretvorba ure v 12-urno obliko
če (ura == 0) {
ura = 12;
} še {
če (ura> 12) {
ura = ura - 12;
}
}
// Posodabljanje ure, minute in sekunde
// če so manj kot 10
ura = posodobitev (ura);
minuta = posodobitev (minuta);
druga = posodobitev (druga);
// Dodajanje časovnih elementov v div
document.getElementById ("digitalna ura"). innerText = ura + ":" + minuta + ":" + sekunda + "" + obdobje;
// Nastavitev časovnika na 1 sekundo (1000 ms)
setTimeout (čas, 1000);
}
// Funkcija posodabljanja časovnih elementov, če so manjši od 10
// Dodaj 0 pred časovne elemente, če so manjši od 10
posodobitev funkcije (t) {
če (t <10) {
vrnitev "0" + t;
}
sicer {
vrnitev t;
}
}
Čas ();

Razumevanje kode JavaScript

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

Pridobivanje trenutnih časovnih elementov

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

var datum = nov datum ();

Trenutni datum in ura se shranita v datum spremenljivka. Zdaj morate iz datuma izvleči trenutno uro, minuto in sekundo.

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

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

Dodelitev trenutnega meridiema (AM / PM)

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

var period = "";
če (ura> = 12) {
obdobje = "PM";
} še {
obdobje = "AM";
}

Pretvorba trenutne ure v 12-urno obliko

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

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

če (ura == 0) {
ura = 12;
} še {
če (ura> 12) {
ura = ura - 12;
}
}

Posodabljanje časovnih elementov

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

ura = posodobitev (ura);
minuta = posodobitev (minuta);
druga = posodobitev (druga);
posodobitev funkcije (t) {
če (t <10) {
vrnitev "0" + t;
}
sicer {
vrnitev t;
}
}

Dodajanje časovnih elementov v DOM

Najprej se do DOM-a dostopa z uporabo id-ja ciljnega div-ja (digitalna ura). Nato se časovni elementi divju dodelijo z innerText postavljalec.

document.getElementById ("digitalna ura"). innerText = ura + ":" + minuta + ":" + sekunda + "" + obdobje;

Posodabljanje ure vsako sekundo

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

setTimeout (čas, 1000);

Oblikovanje digitalne ure z uporabo CSS

Odprite styles.css datoteko in prilepite naslednjo kodo:

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

/ * Uvoz pisave Google Open Condensed Google * /
@import url (' https://fonts.googleapis.com/css2?family=Open+Sans+Condensed: wght @ 300 & display = swap ');
# digitalna ura {
barva ozadja: # 66ffff;
širina: 35%;
marža: samodejno;
oblazinjenje: 50 slikovnih pik;
oblazinjenje-dno: 50 slikovnih pik;
družina pisav: 'Open Sans Condensed', sans-serif;
velikost pisave: 64 slikovnih pik;
poravnava besedila: sredina;
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 za prikaz besedila ure uporablja pisava Open Sans Condensed. Uvoženo je iz Googlovih pisav z uporabo @import. The # digitalna ura Izbirnik id se uporablja za izbiro ciljnega divja. Izbirnik id uporablja id atribut elementa HTML za izbiro določenega elementa.

Sorodno: Primeri preprostih kod CSS, ki se jih lahko naučite v 10 minutah

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

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

Razvijte druge projekte JavaScript

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

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

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

Kako zgraditi preprost kalkulator z uporabo HTML, CSS in JavaScript

Preprosta, izračunana koda je prava pot pri programiranju. Oglejte si, kako zgraditi svoj kalkulator v HTML, CSS in JS.

Preberite Naprej

O avtorju