Kā izveidot digitālo pulksteni, izmantojot HTML, CSS un JavaScript

Digitālais pulkstenis ir viens no labākajiem iesācēju projektiem JavaScript. To ir diezgan viegli iemācīties jebkura prasmju līmeņa cilvēkiem.

Šajā rakstā jūs uzzināsiet, kā izveidot savu digitālo pulksteni, izmantojot HTML, CSS un JavaScript. Jūs iegūsiet praktisku pieredzi ar dažādiem JavaScript jēdzieniem, piemēram, mainīgo izveidi, funkciju izmantošanu, darbu ar datumiem, piekļuvi īpašumiem un to pievienošanu DOM un daudz ko citu.

Sāksim.

Digitālā pulksteņa komponenti

Digitālajam pulkstenim ir četras daļas: stunda, minūte, sekunde un meridiem.

Digitālā pulksteņa projekta mapju struktūra

Izveidojiet saknes mapi, kas satur HTML, CSS un JavaScript failus. Failus var nosaukt kā vien vēlaties. Šeit tiek nosaukta saknes mape Digitālais pulkstenis. Saskaņā ar standarta nosaukumu piešķiršanas kārtību tiek nosaukti HTML, CSS un JavaScript faili index.html, stili.css, un script.js attiecīgi.

Struktūras pievienošana digitālajam pulkstenim, izmantojot HTML

Atveriet index.html failu un ielīmējiet šo kodu:

Lūk, a div ir izveidots ar id gada digitālais pulkstenis. Šis div tiek izmantots, lai parādītu digitālo pulksteni, izmantojot JavaScript. stili.css ir ārēja CSS lapa un ir saistīta ar HTML lapu, izmantojot a tagu. Līdzīgi script.js ir ārēja JS lapa un ir saistīta ar HTML lapu, izmantojot <skripts> tagu.

Funkcionalitātes pievienošana digitālajam pulkstenim, izmantojot JavaScript

Atveriet script.js failu un ielīmējiet šo kodu:

funkcija Laiks () {
// Datuma klases objekta izveide
var datums = jauns datums ();
// Iegūt pašreizējo stundu
var stunda = date.getHours ();
// Saņemt pašreizējo minūti
var minute = date.getMinutes ();
// Saņemt pašreizējo otro
var second = datums.getSeconds ();
// Maināms, lai saglabātu AM / PM
var periods = "";
// Piešķirt AM / PM atbilstoši pašreizējai stundai
ja (stunda> = 12) {
periods = "PM";
} cits
periods = "AM";
}
// Stundas konvertēšana 12 stundu formātā
ja (stunda == 0) {
stunda = 12;
} cits
ja (stunda> 12) {
stunda = stunda - 12;
}
}
// Atjaunina stundu, minūti un sekundi
// ja tie ir mazāki par 10
stunda = atjauninājums (stunda);
minūte = atjauninājums (minūte);
otrais = atjauninājums (otrais);
// Laika elementu pievienošana div
document.getElementById ("digitālais pulkstenis"). internalText = stunda + ":" + minūte + ":" + sekunde + "" + periods;
// Iestatiet taimeri uz 1 sekundi (1000 ms)
setTimeout (laiks, 1000);
}
// Funkcija laika elementu atjaunināšanai, ja tie ir mazāki par 10
// Pievienot 0 pirms laika elementiem, ja tie ir mazāki par 10
funkciju atjauninājums (t) {
ja (t <10) {
atgriež "0" + t;
}
cits {
atgriešanās t;
}
}
Laiks();

Izpratne par JavaScript kodu

The Laiks() un Atjaunināt() funkcijas tiek izmantotas, lai pievienotu digitālajam pulkstenim funkcionalitāti.

Pašreizējo laika elementu iegūšana

Lai iegūtu pašreizējo datumu un laiku, jāizveido objekts Datums. Šī ir sintakse, lai JavaScript izveidotu objektu Datums:

var datums = jauns datums ();

Pašreizējais datums un laiks tiks saglabāti mapē datums mainīgais. Tagad no datuma objekta jāizņem pašreizējā stunda, minūte un sekunde.

date.getHours (), date.getMinutes (), un date.getSeconds () tiek izmantoti, lai iegūtu pašreizējo stundu, minūti un sekundi attiecīgi no datuma objekta. Visi laika elementi tiek glabāti atsevišķos mainīgos lielumos turpmākajām darbībām.

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

Piešķirt pašreizējo Meridiem (AM / PM)

Tā kā digitālais pulkstenis ir 12 stundu formātā, jums jāpiešķir atbilstošais meridiem atbilstoši pašreizējai stundai. Ja pašreizējā stunda ir lielāka vai vienāda ar 12, tad meridiem ir PM (Post Meridiem), pretējā gadījumā tas ir AM (Ante Meridiem).

var periods = "";
ja (stunda> = 12) {
periods = "PM";
} cits
periods = "AM";
}

Pašreizējās stundas konvertēšana 12 stundu formātā

Tagad jums jāpārvērš pašreizējā stunda 12 stundu formātā. Ja pašreizējā stunda ir 0, tad pašreizējā stunda tiek atjaunināta uz 12 (saskaņā ar 12 stundu formātu). Turklāt, ja pašreizējā stunda ir lielāka par 12, tā tiek samazināta par 12, lai tā būtu saskaņota ar 12 stundu laika formātu.

Saistīts: Kā atspējot teksta izvēli, izgriezt, kopēt, ielīmēt un ar peles labo pogu noklikšķiniet uz tīmekļa lapas

ja (stunda == 0) {
stunda = 12;
} cits
ja (stunda> 12) {
stunda = stunda - 12;
}
}

Laika elementu atjaunināšana

Jums ir jāatjaunina laika elementi, ja tie ir mazāki par 10 (vienciparu). 0 tiek pievienots visiem vienciparu laika elementiem (stunda, minūte, sekunde).

stunda = atjauninājums (stunda);
minūte = atjauninājums (minūte);
otrais = atjauninājums (otrais);
funkciju atjauninājums (t) {
ja (t <10) {
atgriež "0" + t;
}
cits {
atgriešanās t;
}
}

Laika elementu pievienošana DOM

Pirmkārt, DOM piekļūst, izmantojot mērķa div ID (digitālais pulkstenis). Tad laika elementi tiek piešķirti div, izmantojot internalText uzstādītājs.

document.getElementById ("digitālais pulkstenis"). internalText = stunda + ":" + minūte + ":" + sekunde + "" + periods;

Pulksteņa atjaunināšana katru sekundi

Pulkstenis tiek atjaunināts katru sekundi, izmantojot setTimeout () metode JavaScript.

setTimeout (laiks, 1000);

Digitālā pulksteņa veidošana, izmantojot CSS

Atveriet stili.css failu un ielīmējiet šo kodu:

Saistīts: Kā izmantot CSS box-shadow: triki un piemēri

/ * Open Sans kondensētā Google fonta importēšana * /
@import url (' https://fonts.googleapis.com/css2?family=Open+Sans+Condensed: wght @ 300 & display = swap ');
# digitālais pulkstenis {
fona krāsa: # 66ffff;
platums: 35%;
margin: auto;
polsterējums - 50 pikseļi;
polsterējuma apakšdaļa: 50 pikseļi;
fontu saime: 'Open Sans Condensed', sans-serif;
fonta lielums: 64 pikseļi;
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);
}

Iepriekšminēto CSS izmanto, lai veidotu digitālo pulksteni. Šeit pulkstenis teksta attēlošanai tiek izmantots fonts Open Sans Condensed. Tas tiek importēts no Google fontiem, izmantojot @import. The # digitālais pulkstenis ID atlasītājs tiek izmantots mērķa div izvēlei. ID atlasītājs izmanto id HTML elementa atribūts, lai atlasītu konkrētu elementu.

Saistīts: Vienkārši CSS koda piemēri, kurus varat uzzināt 10 minūtēs

Ja vēlaties apskatīt visu šajā rakstā izmantoto avota kodu, šeit ir GitHub krātuve. Turklāt, ja vēlaties apskatīt šī projekta tiešraides versiju, varat to pārbaudīt GitHub lapas.

Piezīme: Šajā rakstā izmantotais kods ir MIT licencēta.

Izstrādāt citus JavaScript projektus

Ja esat JavaScript iesācējs un vēlaties būt labs tīmekļa izstrādātājs, jums jāveido daži labi projekti, kuru pamatā ir JavaScript. Tie var pievienot vērtību jūsu CV, kā arī karjerai.

Jūs varat izmēģināt dažus projektus, piemēram, Kalkulators, Hangman spēle, Tic Tac Toe, JavaScript laika apstākļu lietotne, interaktīva galvenā lapa, Svara konvertēšanas rīks, Akmens papīra šķēres utt.

Ja meklējat nākamo uz JavaScript balstīto projektu, vienkārša kalkulators ir lieliska izvēle.

Kā izveidot vienkāršu kalkulatoru, izmantojot HTML, CSS un JavaScript

Vienkāršs, aprēķināts kods ir veids, kā iet programmējot. Pārbaudiet, kā izveidot savu kalkulatoru HTML, CSS un JS.

Lasiet Tālāk

Par autoru