Jak vytvořit digitální hodiny pomocí HTML, CSS a JavaScript

Digitální hodiny patří mezi nejlepší začátečníky v JavaScriptu. Je docela snadné se to naučit pro lidi jakékoli úrovně dovedností.

V tomto článku se naučíte, jak vytvořit vlastní digitální hodiny pomocí HTML, CSS a JavaScriptu. Získáte praktické zkušenosti s různými koncepty JavaScriptu, jako je vytváření proměnných, používání funkcí, práce s daty, přístup a přidávání vlastností do DOM a další.

Začněme.

Součásti digitálních hodin

Digitální hodiny mají čtyři části: hodinu, minutu, sekundu a meridiem.

Struktura složek projektu digitálních hodin

Vytvořte kořenovou složku, která obsahuje soubory HTML, CSS a JavaScript. Soubory můžete pojmenovat, jak chcete. Zde je pojmenována kořenová složka Digitální hodiny. Podle standardní konvence pojmenování jsou pojmenovány soubory HTML, CSS a JavaScript index.html, styles.css, a script.js resp.

Přidání struktury k digitálním hodinám pomocí HTML

Otevři index.html soubor a vložte následující kód:

Tady, a div je vytvořen s

id z digitální hodiny. Tento div se používá k zobrazení digitálních hodin pomocí JavaScriptu. styles.css je externí stránka CSS a je propojena se stránkou HTML pomocí a štítek. Podobně, script.js je externí stránka JS a je propojena se stránkou HTML pomocí <skript> štítek.

Přidání funkčnosti digitálním hodinám pomocí JavaScriptu

Otevři script.js soubor a vložte následující kód:

funkce Time () {
// Vytvoření objektu třídy Date
var date = new Date ();
// Získejte aktuální hodinu
var hour = date.getHours ();
// Získejte aktuální minutu
var minuta = date.getMinutes ();
// Získejte aktuální sekundu
var second = date.getSeconds ();
// Proměnná pro uložení AM / PM
var period = "";
// Přiřazení AM / PM podle aktuální hodiny
pokud (hodina> = 12) {
perioda = "PM";
} else {
period = "AM";
}
// Převod hodiny ve 12hodinovém formátu
pokud (hodina == 0) {
hodina = 12;
} else {
pokud (hodina> 12) {
hodina = hodina - 12;
}
}
// Aktualizace hodin, minut a sekund
// pokud jsou menší než 10
hodina = aktualizace (hodina);
minuta = aktualizace (minuta);
second = update (second);
// Přidání časových prvků do div
document.getElementById ("digital-clock"). innerText = hour + ":" + minute + ":" + second + "" + period;
// Nastavit časovač na 1 s (1000 ms)
setTimeout (Time, 1000);
}
// Funkce pro aktualizaci časových prvků, pokud jsou menší než 10
// Přidejte 0 před časové prvky, pokud jsou menší než 10
aktualizace funkce (t) {
if (t <10) {
návrat "0" + t;
}
else {
návrat t;
}
}
Čas();

Porozumění kódu JavaScript

The Čas() a Aktualizace() funkce slouží k přidání funkcí k digitálním hodinám.

Získání prvků aktuálního času

Chcete-li získat aktuální datum a čas, musíte vytvořit objekt Date. Toto je syntaxe pro vytvoření objektu Date v JavaScriptu:

var date = new Date ();

Aktuální datum a čas budou uloženy v datum proměnná. Nyní musíte z objektu data extrahovat aktuální hodinu, minutu a sekundu.

date.getHours (), date.getMinutes (), a date.getSeconds () slouží k získání aktuální hodiny, minuty a sekundy z objektu data. Všechny časové prvky jsou uloženy v samostatných proměnných pro další operace.

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

Přiřazení aktuálního poledníku (AM / PM)

Vzhledem k tomu, že digitální hodiny jsou ve 12hodinovém formátu, je třeba přiřadit příslušné meridiem podle aktuální hodiny. Pokud je aktuální hodina větší nebo rovna 12, pak je meridiem PM (Post Meridiem), jinak je to AM (Ante Meridiem).

var period = "";
pokud (hodina> = 12) {
perioda = "PM";
} else {
period = "AM";
}

Převod aktuální hodiny ve 12hodinovém formátu

Nyní musíte převést aktuální hodinu do 12hodinového formátu. Pokud je aktuální hodina 0, pak se aktuální hodina aktualizuje na 12 (podle 12hodinového formátu). Pokud je aktuální hodina větší než 12, sníží se o 12, aby zůstala v souladu s 12hodinovým formátem času.

Příbuzný: Jak zakázat výběr textu, vyjmutí, kopírování, vložení a kliknutí pravým tlačítkem na webovou stránku

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

Aktualizace časových prvků

Musíte aktualizovat časové prvky, pokud jsou menší než 10 (Single-Digit). 0 se připojí ke všem jednociferným časovým prvkům (hodina, minuta, sekunda).

hodina = aktualizace (hodina);
minuta = aktualizace (minuta);
second = update (second);
aktualizace funkce (t) {
if (t <10) {
návrat "0" + t;
}
else {
návrat t;
}
}

Přidání časových prvků do DOM

Nejprve se k DOM přistupuje pomocí ID cílového div (digitální hodiny). Potom jsou časové prvky přiřazeny div pomocí innerText seřizovač.

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

Aktualizace hodin každou sekundu

Hodiny se aktualizují každou sekundu pomocí setTimeout () metoda v JavaScriptu.

setTimeout (Time, 1000);

Styling digitálních hodin pomocí CSS

Otevři styles.css soubor a vložte následující kód:

Příbuzný: Jak používat CSS box-shadow: Triky a příklady

/ * Import písma Open Sans Condensed Google * /
@import url (' https://fonts.googleapis.com/css2?family=Open+Sans+Condensed: wght @ 300 & display = swap ');
#digitální hodiny {
barva pozadí: # 66ffff;
šířka: 35%;
okraj: auto;
vycpávka: 50px;
polstrované dno: 50px;
rodina fontů: 'Open Sans Condensed', sans-serif;
velikost písma: 64px;
zarovnání textu: na střed;
box-shadow: 0 4px 8px 0 rgba (0, 0, 0, 0,2), 0 6px 20px 0 rgba (0, 0, 0, 0,19);
}

Výše uvedený CSS se používá ke stylu digitálních hodin. Zde se pro zobrazení textu hodin používá písmo Open Sans Condensed. Importuje se z písem Google pomocí @import. The #digitální hodiny volič id se používá k výběru cílové div. Volič id používá id atribut prvku HTML pro výběr konkrétního prvku.

Příbuzný: Jednoduché příklady kódu CSS, které se můžete naučit za 10 minut

Pokud se chcete podívat na kompletní zdrojový kód použitý v tomto článku, zde je Úložiště GitHub. Pokud se také chcete podívat na živou verzi tohoto projektu, můžete si ji prohlédnout prostřednictvím Stránky GitHub.

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

Vývoj dalších projektů JavaScriptu

Pokud jste v JavaScriptu začátečník a chcete být dobrým webovým vývojářem, musíte vybudovat několik dobrých projektů založených na JavaScriptu. Mohou přidat hodnotu vašemu životopisu i vaší kariéře.

Můžete si vyzkoušet některé projekty, jako je kalkulačka, hra Hangman, Tic Tac Toe, aplikace pro počasí v JavaScriptu, interaktivní vstupní stránka, nástroj pro přeměnu váhy, nůžky na papír, atd.

Pokud hledáte svůj další projekt založený na JavaScriptu, vynikající volbou je jednoduchá kalkulačka.

Jak vytvořit jednoduchou kalkulačku pomocí HTML, CSS a JavaScript

Cestou při programování je jednoduchý vypočítaný kód. Podívejte se, jak vytvořit vlastní kalkulačku v HTML, CSS a JS.

Přečtěte si další

O autorovi