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

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

Digitálne hodiny patria k najlepším projektom pre začiatočníkov v JavaScripte. Je ľahké sa to naučiť ľuďom akejkoľvek úrovne znalostí.





V tomto článku sa naučíte, ako vytvoriť vlastné digitálne hodiny pomocou 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.



najlepšia bezplatná aplikácia pre živé televízne vysielanie pre Android

Začnime.





Komponenty digitálnych hodín

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

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

Vytvorte koreňový priečinok, ktorý obsahuje súbory HTML, CSS a JavaScript. Súbory môžete pomenovať ľubovoľne. 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 , styles.css a script.js resp.



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

Otvor index.html súbor a prilepte nasledujúci kód:





Digital Clock Using JavaScript






Tu a div je vytvorený s príponou id z digitálne hodiny . Tento div sa používa na zobrazenie digitálnych hodín pomocou JavaScriptu. styles.css je externá stránka CSS a je prepojená so stránkou HTML pomocou súboru tag. Podobne script.js je externá stránka JS a je prepojená so stránkou HTML pomocou súboru < skript> tag.



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

Otvor script.js súbor a prilepte nasledujúci 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();

Pochopenie kódu JavaScript

The Čas () a aktualizovať () funkcie sa používajú na pridanie funkcií k digitálnym hodinám.



Získanie prvkov aktuálneho času

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

var date = new Date();

Aktuálny dátum a čas budú uložené v priečinku dátum premenná. Teraz z objektu dátumu musíte 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 oddelených premenných pre ďalšie operácie.

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

Priradenie aktuálneho poludnia (AM/PM)

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

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

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

Teraz musíte aktuálnu hodinu previesť do 12-hodinového formátu. Ak je aktuálna hodina 0, aktuálna hodina sa 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 bola v súlade s 12-hodinovým formátom času.

Súvisiace: Ako zakázať výber textu, vystrihnúť, kopírovať, prilepiť a kliknúť pravým tlačidlom na webovú stránku

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

Aktualizácia časových prvkov

Časové prvky musíte aktualizovať, ak sú menšie ako 10 (jednociferné). 0 je pripojený ku všetkým jednociferným časovým prvkom (hodina, minúta, sekunda).

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

Pridanie časových prvkov do DOM

Najprv sa k DOM dostanete pomocou ID cieľového div ( digitálne hodiny ). Potom sú divu priradené časové prvky pomocou innerText nastavovač.

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

Aktualizácia hodín každú sekundu

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

setTimeout(Time, 1000);

Úprava digitálnych hodín pomocou CSS

Otvor styles.css súbor a prilepte nasledujúci kód:

Súvisiace: Ako používať CSS box-shadow: triky a prí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);
}

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 písiem Google pomocou @import . The #digitálne hodiny volič voličov slúži na výber cieľového 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 súbor Úložisko GitHub . Tiež, ak sa chcete pozrieť na živú verziu tohto projektu, môžete si to vyskúšať prostredníctvom Stránky GitHub .

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

Vyvíjajte ďalšie projekty JavaScript

Ak ste začiatočník v JavaScripte a chcete byť dobrý webový vývojár, musíte vytvoriť niekoľko dobrých projektov založených na JavaScripte. Môžu byť prínosom pre váš životopis aj pre vašu kariéru.

Môžete vyskúšať niektoré projekty, ako je kalkulačka, hra Hangman, Tic Tac Toe, aplikácia pre počasie v jazyku JavaScript, interaktívna vstupná stránka, nástroj na konverziu hmotnosti, nožnice na papier Rock, atď.

ako niekomu zakázať prístup na facebook

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

zdieľam zdieľam Tweet E -mail Ako vytvoriť jednoduchú kalkulačku pomocou HTML, CSS a JavaScript

Jednoduchý, vypočítaný kód je cestou, ktorou sa treba pri programovaní uberať. Zistite, ako vytvoriť vlastnú kalkulačku v HTML, CSS a JS.

Čítajte ďalej Súvisiace témy O autorovi Yuvraj Chandra(60 publikovaných článkov)

Yuvraj je študentom informatiky na univerzite v Dillí v Indii. Je nadšený pre vývoj webových aplikácií Full Stack. Keď nepíše, skúma hĺbku rôznych technológií.

Viac od Yuvraja Chandru

prihlásiť sa ku odberu noviniek

Pripojte sa k nášmu bulletinu a získajte technické tipy, recenzie, bezplatné elektronické knihy a exkluzívne ponuky!

Kliknutím sem sa prihlásite na odber