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

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

A digitális óra a JavaScript legjobb kezdő projektjei közé tartozik. Nagyon könnyű megtanulni bármilyen készségű emberek számára.





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önböző JavaScript-koncepciókkal, például változók létrehozásával, függvények használatával, dátumokkal való munkával, tulajdonságok elérésével és hozzáadásával a DOM-hoz stb.



e -mailt küldeni a mobiltelefonra

Lássunk neki.





A digitális óra összetevői

A digitális óra négy részből áll: ó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. A fájloknak tetszőleges nevet adhat. Itt a gyökérmappát nevezik el Digitális óra . A szabványos elnevezési megállapodás szerint a HTML, CSS és JavaScript fájlok elnevezése megtörténik 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ájlt és illessze be a következő kódot:





Digital Clock Using JavaScript






Itt egy div -vel jön létre id nak,-nek digitális óra . Ez a div a Java óra használatával megjeleníti a digitális órát. stílusok.css egy külső CSS oldal, és a címke. Hasonlóképpen, script.js egy külső JS oldal, és a < script> címke.



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

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

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

A JavaScript kód megértése

Az Idő() és frissítés () funkciókkal funkcionalitást adhat hozzá a digitális órához.



Az aktuális időelemek beszerzése

Az aktuális dátum és idő lekéréséhez létre kell hoznia egy Dátum objektumot. Ez a szintaxis a dátum objektum létrehozásához a JavaScriptben:

var date = new Date();

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

date.getHours () , date.getMinutes (), és date.getSeconds () a dátum objektum aktuális órájának, percének és másodpercének lekérésére szolgál. Az összes időelemet külön változók tárolják a további műveletekhez.

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

Az aktuális dél hozzárendelése (AM/PM)

Mivel a Digitális Óra 12 órás formátumban van, hozzá kell rendelnie a megfelelő meridiemet az aktuális órának megfelelően. Ha az aktuális óra nagyobb vagy egyenlő 12 -vel, akkor a meridiem PM (Post Meridiem), máskülönben AM (Ante Meridiem).

var period = '';
if (hour >= 12) {
period = 'PM';
} else {
period = '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átumba. Ha az aktuális óra 0, akkor az aktuális óra 12-re frissül (a 12 órás formátum szerint). Továbbá, ha az aktuális óra 12-nél nagyobb, akkor 12-gyel csökken, hogy a 12 órás időformátumhoz igazodjon.

Összefüggő: Hogyan lehet letiltani a szövegkiválasztást, kivágást, másolást, beillesztést és a jobb egérgombbal történő kattintást egy weboldalon

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

Az időelemek frissítése

Frissítenie kell az időelemeket, ha kevesebb, mint 10 (egy számjegyű). Minden 0 számjegyű időelemhez 0 (óra, perc, másodperc) fűződik.

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

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

Először is, a DOM a cél div azonosítójával érhető el ( digitális óra ). Ezután az időelemeket hozzárendelik a div -hoz a internalText szetter.

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

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

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

setTimeout(Time, 1000);

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

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

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

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

A fenti CSS a digitális óra stílusát használja. Itt az Open Sans Condensed betűtípust használják az óra szövegének megjelenítésére. A rendszer importálja a Google betűtípusokból @import . Az #digitális óra azonosító választó a cél div kiválasztására szolgál. Az azonosítóválasztó a id egy 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, itt van GitHub adattár . Továbbá, ha meg akarja nézni a projekt élő verzióját, akkor nézze meg GitHub oldalak .

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

Más JavaScript projektek fejlesztése

Ha kezdő a JavaScript használatában, és jó webfejlesztő szeretne lenni, akkor jó JavaScript-alapú projekteket kell felépítenie. Hozzáadhatják értékét önéletrajzához, valamint karrierjéhez.

Kipróbálhat néhány projektet, például számológépet, hóhér játékot, Tic Tac Toe -t, JavaScript időjárás -alkalmazást, interaktív céloldalt, súly -átváltó eszközt, kőpapír -ollót stb.

hogyan lehet megváltoztatni a programok telepítési helyét Windows 10

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

Részvény Részvény Csipog Email Hogyan készítsünk egyszerű számológépet HTML, CSS és JavaScript használatával

Egyszerű, kiszámított kód a programozás módja. Nézze meg, hogyan készíthet saját számológépet HTML, CSS és JS formátumban.

Olvassa tovább Kapcsolódó témák A szerzőről Yuvraj Chandra(60 cikk megjelent)

Yuvraj egy számítástechnikai egyetemi hallgató a Delhi Egyetemen, Indiában. Szenvedélyesen foglalkozik a Full Stack webfejlesztéssel. Amikor nem ír, a különböző technológiák mélységét kutatja.

Bővebben: Yuvraj Chandra

Iratkozzon fel hírlevelünkre

Csatlakozz hírlevelünkhöz, ahol technikai tippeket, véleményeket, ingyenes e -könyveket és exkluzív ajánlatokat találsz!

Feliratkozáshoz kattintson ide