Ako vytvoriť digitálne hodiny pomocou HTML, CSS a JavaScript

Digitálne hodiny patria medzi najlepšie začiatočnícke projekty v JavaScripte. Je ľahké sa naučiť pre ľudí akejkoľvek úrovne zručností.

V tomto článku sa dozviete, ako si vytvoriť vlastné digitálne hodiny pomocou kódu HTML, CSS a JavaScript. Získate praktické skúsenosti s rôznymi konceptmi JavaScriptu, ako je vytváranie premenných, používanie funkcií, práca s dátumami, prístup a pridávanie vlastností do DOM a ďalšie.

Začnime.

Súčasti digitálnych hodín

Digitálne hodiny majú štyri časti: hodinu, minútu, sekundu a poludník.

Štruktúra priečinkov projektu Digitálne hodiny

Vytvorte koreňový priečinok, ktorý obsahuje súbory HTML, CSS a JavaScript. Súbory môžete pomenovať, ako chcete. Tu je pomenovaný koreňový priečinok Digitálne hodiny. Podľa štandardnej konvencie pomenovania sú pomenované súbory HTML, CSS a JavaScript index.html, štýly.cssa script.js resp.

Pridanie štruktúry k digitálnym hodinám pomocou HTML

Otvor index.html súbor a vložte nasledujúci kód:

Tu, a div sa vytvára pomocou id z digitálne hodiny. Táto div sa používa na zobrazenie digitálnych hodín pomocou JavaScriptu. štýly.css je externá stránka CSS a je prepojená so stránkou HTML pomocou a značka. Podobne script.js je externá stránka JS a je prepojená so stránkou HTML pomocou <skript> značka.

Pridanie funkčnosti digitálnym hodinám pomocou JavaScriptu

Otvor script.js súbor a vložte nasledujúci kód:

funkcia Čas () {
// Vytvorenie objektu triedy Date
var date = new Date ();
// Získajte aktuálnu hodinu
var hodina = date.getHours ();
// Získajte aktuálnu minútu
var minúta = date.getMinutes ();
// Získajte aktuálnu sekundu
var second = date.getSeconds ();
// Premenlivá na uloženie AM / PM
var period = "";
// Priradenie AM / PM podľa aktuálnej hodiny
ak (hodina> = 12) {
obdobie = "PM";
} else {
obdobie = „AM“;
}
// Prevod hodiny v 12-hodinovom formáte
ak (hodina == 0) {
hodina = 12;
} else {
ak (hodina> 12) {
hodina = hodina - 12;
}
}
// Aktualizácia hodiny, minúty a sekundy
// ak sú menšie ako 10
hodina = aktualizácia (hodina);
minúta = aktualizácia (minúta);
druhý = aktualizácia (druhý);
// Pridanie časových prvkov do div
document.getElementById ("digitálne hodiny"). innerText = hodina + ":" + minúta + ":" + sekunda + "" + bodka;
// Nastaviť časovač na 1 s (1 000 ms)
setTimeout (Time, 1000);
}
// Funkcia na aktualizáciu časových prvkov, ak sú menšie ako 10
// Pripojte 0 pred časové prvky, ak sú menšie ako 10
aktualizácia funkcie (t) {
if (t <10) {
návrat "0" + t;
}
else {
návrat t;
}
}
Čas ();

Pochopenie kódu JavaScript

The Čas () a aktualizácia () funkcie sa používajú na doplnenie funkčnosti digitálnych hodín.

Získanie prvkov aktuálneho času

Ak chcete získať aktuálny dátum a čas, musíte si vytvoriť objekt Date. Toto je syntax pre vytvorenie objektu Date v JavaScripte:

var date = new Date ();

Aktuálny dátum a čas budú uložené v priečinku dátum premenná. Teraz musíte z objektu dátumu extrahovať aktuálnu hodinu, minútu a sekundu.

date.getHours (), date.getMinutes (), a date.getSeconds () sa používajú na získanie aktuálnej hodiny, minúty a sekundy z objektu dátumu. Všetky časové prvky sú uložené v samostatných premenných pre ďalšie operácie.

var hodina = date.getHours ();
var minúta = date.getMinutes ();
var second = date.getSeconds ();

Priradenie súčasného poludníka (AM / PM)

Pretože sú digitálne hodiny v 12-hodinovom formáte, musíte priradiť príslušné poludník podľa aktuálnej hodiny. Ak je aktuálna hodina väčšia alebo rovná 12, potom je poludník PM (Post Meridiem), inak je to AM (Ante Meridiem).

var period = "";
ak (hodina> = 12) {
obdobie = "PM";
} else {
obdobie = „AM“;
}

Prevod aktuálnej hodiny na 12-hodinový formát

Teraz musíte previesť aktuálnu hodinu do 12-hodinového formátu. Ak je aktuálna hodina 0, potom sa aktuálna hodina aktualizuje na 12 (podľa 12-hodinového formátu). Ak je aktuálna hodina väčšia ako 12, zníži sa o 12, aby zostala zarovnaná s 12-hodinovým formátom času.

Súvisiace: Ako zakázať výber textu, vystrihnutie, kopírovanie, prilepenie a kliknutie pravým tlačidlom myši na webovú stránku

ak (hodina == 0) {
hodina = 12;
} else {
ak (hodina> 12) {
hodina = hodina - 12;
}
}

Aktualizácia časových prvkov

Ak sú časové prvky menšie ako 10 (jednociferné), musíte ich aktualizovať. 0 sa pripája ku všetkým jednomiestnym časovým prvkom (hodina, minúta, sekunda).

hodina = aktualizácia (hodina);
minúta = aktualizácia (minúta);
druhý = aktualizácia (druhý);
aktualizácia funkcie (t) {
if (t <10) {
návrat "0" + t;
}
else {
návrat t;
}
}

Pridanie časových prvkov do DOM

Najskôr sa k DOM pristupuje pomocou ID cieľového div (digitálne hodiny). Potom sú časové prvky priradené k prvku div pomocou innerText stavač.

document.getElementById ("digitálne hodiny"). innerText = hodina + ":" + minúta + ":" + sekunda + "" + bodka;

Aktualizácia hodín každú sekundu

Hodiny sa aktualizujú každú sekundu pomocou tlačidla setTimeout () metóda v JavaScripte.

setTimeout (Time, 1000);

Styling digitálnych hodín pomocou CSS

Otvor štýly.css súbor a vložte nasledujúci kód:

Súvisiace: Ako používať CSS box-shadow: Triky a príklady

/ * Import písma Open Sans Condensed Google * /
@import url (' https://fonts.googleapis.com/css2?family=Open+Sans+Condensed: wght @ 300 & display = swap ');
#digitálne hodiny {
farba pozadia: # 66ffff;
šírka: 35%;
okraj: auto;
výplň: 50px;
polstrované dno: 50px;
font-family: 'Open Sans Condensed', sans-serif;
veľkosť písma: 64px;
zarovnanie textu: na stred;
tieň poľa: 0 4px 8px 0 rgba (0, 0, 0, 0,2), 0 6px 20px 0 rgba (0, 0, 0, 0,19);
}

Vyššie uvedený CSS sa používa na úpravu digitálnych hodín. Tu sa na zobrazenie textu hodín používa písmo Open Sans Condensed. Importuje sa z fontov Google pomocou @import. The #digitálne hodiny volič id sa používa na výber cieľovej div. Volič id používa id atribút prvku HTML na výber konkrétneho prvku.

Súvisiace: Jednoduché príklady kódu CSS, ktoré sa môžete naučiť za 10 minút

Ak sa chcete pozrieť na kompletný zdrojový kód použitý v tomto článku, tu je Úložisko GitHub. Ak sa chcete pozrieť na živú verziu tohto projektu, môžete si ju pozrieť prostredníctvom Stránky GitHub.

Poznámka: Kód použitý v tomto článku je Licencia MIT.

Vyvíjajte ďalšie projekty JavaScriptu

Ak ste v JavaScripte začiatočník a chcete byť dobrým webovým vývojárom, musíte si vytvoriť dobré projekty založené na JavaScripte. Môžu pridať hodnotu vášmu životopisu, ako aj vašej kariére.

Môžete vyskúšať niektoré projekty, ako je kalkulačka, hra s katom, Tic Tac Toe, aplikácia na predpoveď počasia v jazyku JavaScript, interaktívna vstupná stránka, nástroj na premenu váhy, nožnice na skalný papier atď.

Ak hľadáte svoj ďalší projekt založený na JavaScripte, vynikajúcou voľbou je jednoduchá kalkulačka.

Ako zostaviť jednoduchú kalkulačku pomocou HTML, CSS a JavaScript

Cestou pri programovaní je jednoduchý vypočítaný kód. Zistite, ako vytvoriť vlastnú kalkulačku v jazykoch HTML, CSS a JS.

Prečítajte si Ďalej

O autorovi