Digitális óra létrehozása HTML, CSS és JavaScript használatával

A Digital Clock a legjobb kezdő projektek közé tartozik a JavaScript-ben. Bármilyen készségszintű ember számára könnyű megtanulni.

Ebben a cikkben megtudhatja, hogyan készíthet saját digitális órát HTML, CSS és JavaScript használatával. Gyakorlati tapasztalatokat szerezhet a különféle JavaScript-koncepciókkal kapcsolatban, mint például változók létrehozása, függvények használata, dátummal való munka, tulajdonságok elérése és hozzáadása a DOM-hoz, stb.

Kezdjük el.

A digitális óra elemei

A digitális órának négy része van: óra, perc, másodperc és meridiem.

A digitális óra projekt mappa felépítése

Hozzon létre egy gyökérmappát, amely tartalmazza a HTML, CSS és JavaScript fájlokat. Bármelyik nevet megadhatja a fájloknak. Itt a gyökér mappa van megnevezve Digitális óra. A szabványos elnevezési szokás szerint a HTML, CSS és JavaScript fájlokat nevezik meg index.html, stílusok.css, és script.js illetőleg.

Struktúra hozzáadása a digitális órához HTML használatával

Nyissa meg a index.html fájl, és illessze be a következő kódot:

Itt egy div -val jön létre id nak,-nek digitális óra. Ez a div a digitális óra megjelenítésére szolgál JavaScript használatával. stílusok.css egy külső CSS-oldal, és a HTML-oldalhoz van kapcsolva az a használatával címke. Hasonlóképpen, script.js egy külső JS-oldal, és a HTML-oldalhoz van kapcsolva a <szkript> címke.

Funkció hozzáadása a digitális órához a JavaScript használatával

Nyissa meg a script.js fájl, és illessze be a következő kódot:

függvény Idő () {
// A Date osztály objektumának létrehozása
var date = new Date ();
// Az aktuális óra lekérése
var hour = date.getHours ();
// Aktuális perc megadása
var minute = date.getMinutes ();
// Aktuális másodperc
var second = date.getSeconds ();
// Változtatható az AM / PM tárolásához
var period = "";
// AM / PM hozzárendelése az aktuális óra szerint
ha (óra> = 12) {
időszak = "PM";
} más {
periódus = "AM";
}
// Az óra konvertálása 12 órás formátumban
if (óra == 0) {
óra = 12;
} más {
if (óra> 12) {
óra = óra - 12;
}
}
// Óra, perc és másodperc frissítése
// ha 10-nél kisebbek
óra = frissítés (óra);
perc = frissítés (perc);
második = frissítés (második);
// Időelemek hozzáadása a div-hez
document.getElementById ("digitális óra"). internalText = óra + ":" + perc + ":" + másodperc + "" + periódus;
// Az időzítő beállítása 1 másodpercre (1000 ms)
setTimeout (Idő, 1000);
}
// Funkció az időelemek frissítésére, ha azok 10-nél kisebbek
// Függelék 0 az időelemek elé, ha azok kevesebbek, mint 10
függvényfrissítés (t) {
ha (t <10) {
visszatér "0" + t;
}
más {
visszatér t;
}
}
Idő();

A JavaScript kód megértése

A Idő() és frissítés () A funkciókat a digitális óra funkcióinak hozzáadásához használják.

Az aktuális időelemek megszerzése

Az aktuális dátum és idő megszerzéséhez létre kell hoznia egy Date objektumot. Ez a szintaxis a Date objektum JavaScript-ben történő létrehozásához:

var date = new Date ();

Az aktuális dátum és idő a dátum változó. Most ki kell vonni az aktuális órát, percet és másodpercet a dátumobjektumból.

date.getHours (), date.getMinutes (), és date.getSeconds () az aktuális óra, perc és másodperc lekérésére szolgálnak a dátumobjektumtól. Az összes időelem külön változókban van tárolva a további műveletekhez.

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

A jelenlegi Meridiem (AM / PM) hozzárendelése

Mivel a digitális óra 12 órás formátumban van, az aktuális órának megfelelően ki kell rendelnie a megfelelő meridiemet. Ha az aktuális óra nagyobb vagy egyenlő 12-vel, akkor a meridiem PM (Post Meridiem), egyébként AM (Ante Meridiem).

var period = "";
ha (óra> = 12) {
időszak = "PM";
} más {
periódus = "AM";
}

Az aktuális óra konvertálása 12 órás formátumban

Most át kell alakítania az aktuális órát 12 órás formátumra. Ha az aktuális óra 0, akkor az aktuális óra 12-re frissül (a 12 órás formátumnak megfelelően). Továbbá, ha az aktuális óra nagyobb, mint 12, akkor 12-vel csökken, hogy a 12 órás időformátumhoz igazodjon.

Összefüggő: Hogyan tilthatja le a szövegválasztást, a kivágást, a másolást, a beillesztést és a jobb gombbal kattintson a weboldalra

if (óra == 0) {
óra = 12;
} más {
if (óra> 12) {
óra = óra - 12;
}
}

Az időelemek frissítése

Frissíteni kell az időelemeket, ha azok 10-nél kisebbek (egyjegyűek). A 0 hozzá van adva az összes egyjegyű időelemhez (óra, perc, másodperc).

óra = frissítés (óra);
perc = frissítés (perc);
második = frissítés (második);
függvényfrissítés (t) {
ha (t <10) {
visszatér "0" + t;
}
más {
visszatér t;
}
}

Az időelemek hozzáadása a DOM-hoz

Először is, a DOM-hoz a cél div id (digitális óra). Ezután az időelemeket hozzárendeljük a div-hez a internalText szetter.

document.getElementById ("digitális óra"). internalText = óra + ":" + perc + ":" + másodperc + "" + periódus;

Az óra frissítése másodpercenként

Az óra másodpercenként frissül a setTimeout () módszer a JavaScript-ben.

setTimeout (Idő, 1000);

A digitális óra stílusa CSS használatával

Nyissa meg a stílusok.css fájl, és illessze be a következő kódot:

Összefüggő: A CSS box-shadow használata: trükkök és példák

/ * Open Sans sűrített Google betűtípus importálása * /
@import url (' https://fonts.googleapis.com/css2?family=Open+Sans+Condensed: wght @ 300 & display = swap ');
#digitális óra {
háttérszín: # 66ffff;
szélesség: 35%;
margó: auto;
topding-top: 50px;
aljzat: 50px;
font-family: 'Nyitott Sans Sűrített', sans-serif;
betűméret: 64 képpont;
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);
}

A fenti CSS-t használják a digitális óra stílusának megtervezésére. Itt az Open Sans Condensed betűtípust használják az óra szövegének megjelenítésére. A Google betűtípusaiból importálva @import. A #digitális óra Az id választó a cél div kiválasztására szolgál. Az id választó a id HTML elem attribútuma egy adott elem kiválasztásához.

Összefüggő: Egyszerű CSS kód példák, amelyeket 10 perc alatt megtanulhat

Ha meg szeretné tekinteni a cikkben használt teljes forráskódot, íme a GitHub tárház. Továbbá, ha meg akarja nézni a projekt élő verzióját, megnézheti GitHub oldalak.

jegyzet: A cikkben használt kód: MIT engedéllyel.

Más JavaScript projektek kidolgozása

Ha Ön kezdő a JavaScript-ben, és jó webfejlesztő szeretne lenni, akkor néhány jó JavaScript-alapú projektet kell készítenie. Hozzáadhatnak értéket önéletrajzához, valamint karrierjéhez.

Kipróbálhat néhány projektet, például a Számológépet, a Hóhér játékot, a Tic Tac Toe-t, a JavaScript időjárási alkalmazást, az interaktív céloldalt, a Súlykonverziós eszközt, a Rock Paper Scissors stb.

Ha a következő JavaScript-alapú projektjét keresi, az egyszerű számológép kiváló választás.

Hogyan készítsünk egy egyszerű számológépet HTML, CSS és JavaScript használatával

Egyszerű, számított kód a programozás során. Nézze meg, hogyan készíthet saját számológépet HTML, CSS és JS fájlokban.

Olvassa el a következőt

A szerzőről