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

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

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





V tomto článku se naučíte, jak vytvořit vlastní digitální hodiny pomocí HTML, CSS a JavaScript. 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ší.



herní aplikace, které nepoužívají data

Začněme.





Součásti digitálních hodin

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

Struktura složky 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:





Digital Clock Using JavaScript






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



Přidání funkcí digitálních hodin pomocí JavaScriptu

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

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

Porozumění kódu JavaScript

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



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 () se používají 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 minute = date.getMinutes();
var second = date.getSeconds();

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

Protože jsou digitální hodiny 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 AM (Ante Meridiem).

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

Převod aktuální hodiny na 12hodinový formát

Nyní je třeba převést aktuální hodinu na 12hodinový formát. 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 byla v souladu s 12hodinovým formátem času.

Příbuzný: Jak zakázat výběr textu, vyjmout, kopírovat, vložit a kliknout pravým tlačítkem na webovou stránku

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

Aktualizace časových prvků

Časové prvky je třeba aktualizovat, pokud jsou menší než 10 (jednociferné). Ke všem jednociferným časovým prvkům (hodina, minuta, sekunda) je připojena 0.

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

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

Nejprve je k DOM přistupováno 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

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

Výše uvedený CSS se používá ke stylu digitálních hodin. Zde se k zobrazení textu hodin používá písmo Open Sans Condensed. Je importováno z písem Google pomocí @import . The #digitální hodiny volič ID slouží k výběru cílového div. Volič ID používá id atribut elementu 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 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 .

Vyvíjejte další projekty JavaScriptu

Pokud jste v JavaScriptu začátečník a chcete být dobrým webovým vývojářem, musíte vytvořit dobré projekty založené na JavaScriptu. Mohou přidat hodnotu pro váš životopis i pro vaši kariéru.

Můžete vyzkoušet některé projekty, jako je kalkulačka, hra Hangman, Tic Tac Toe, aplikace pro předpověď počasí v jazyce JavaScript, interaktivní vstupní stránka, nástroj pro převod hmotnosti, nůžky na papír Rock atd.

jak zapnout televizi

Pokud hledáte svůj další projekt založený na JavaScriptu, je skvělá volba jednoduchá kalkulačka.

Podíl Podíl tweet E-mailem Jak vytvořit jednoduchou kalkulačku pomocí HTML, CSS a JavaScript

Jednoduchý, vypočítaný kód je cestou, kterou se při programování můžete vydat. Podívejte se, jak vytvořit vlastní kalkulačku v HTML, CSS a JS.

Číst dále Související témata O autorovi Yuvraj Chandra(60 článků zveřejněno)

Yuvraj je studentem informatiky na univerzitě v Dillí v Indii. Je nadšený pro webový vývoj Full Stack. Když nepíše, zkoumá hloubku různých technologií.

Více od Yuvraj Chandra

Přihlaste se k odběru našeho zpravodaje

Připojte se k našemu zpravodaji a získejte technické tipy, recenze, bezplatné elektronické knihy a exkluzivní nabídky!

Kliknutím sem se přihlásíte k odběru