Interaktīva pulksteņa izstrāde ar JavaScript – rokasgrāmata

Tu vēlies savā mājaslapā ieviest interaktīvo pulksteni? Nebaidies, tas ir vieglāk, nekā šķiet! Šajā rokasgrāmatā mēs rādīsim, kā ar dažām koda rindām izveidot pulksteni, kas regulāri atjaunojas katrā sekundē. Tādējādi tu iegūsi ne tikai noderīgu rīku, bet arī efektīvu projektu, lai uzlabotu savas JavaScript un jQuery prasmes. Sāksim!

Galvenie secinājumi

• JavaScript izmantošana dinamiska pulksteņa izveidei.
• setTimeout izmantošana, lai regulāri atjaunotu laiku.
• Laika formatēšana, lai tas tiktu rādīts pievilcīgā veidā.

Solī pa solim norādījumi

1. solis: Pamatu izveide

Vispirms sāksim ar pamatu izveidi mūsu projektam. Pirmais solis ir izdzēst iepriekšējo kodu, kas vairs nav nepieciešams. Tu vēlies izveidot skaidru sākumu.

Tagad pievienosim funkciju, kas ir atbildīga par pulksteņa sākšanu. Nosauc šo funkciju par „startUhr“. Lai varētu izmantot aktuālo laiku, izmantosim new Date objektu.

2. solis: Laika iegūšana

Funkcijā startUhr vispirms ir jāiegūst stundas, minūtes un sekundes. Tu to vari viegli izdarīt, izmantojot metodes getHours(), getMinutes() un getSeconds().

3. solis: HTML elementa izveide pulkstenim

Nākamais, tev ir nepieciešams HTML elements, kurā tiks rādīts laiks. Piešķir šim elementam ID „uhr“. Tas ir svarīgi, jo vēlāk tu izmantosi šo ID, lai piekļūtu elementam.

4. solis: Pulksteņa satura iestatīšana

Tagad, kad laiks ir iegūts, ir pienācis laiks atjaunināt pulksteņa HTML saturu. Tu vari to izdarīt, iestatot „uhr“ elementa innerHTML uz formatēto laiku. Laikam jābūt redzamam formātā „HH:MM:SS“.

5. solis: Laika regulāra atjaunināšana

Lai regulāri atjauninātu laiku, tu vari izmantot setTimeout funkciju. Šī funkcija izpildīs startUhr funkciju ik pēc 500 milisekundēm.

6. solis: „onload“ notikuma pievienošana

Lai nodrošinātu, ka pulksteņa funkcija tiks palaista, kad mājaslapa tiks ielādēta, tev jāsastāda „onload“ notikums HTML sadaļā. Tam raksti: onload="startUhr()".

7. solis: Laika formatēšana

Tagad tev jānodrošina, ka pulksteņa attēlojums izskatās vienmērīgi. Ja stundas, minūtes vai sekundes ir mazākas par 10, tām jāpievieno vadošā nulle. Tam tu izveidosi funkciju, ko nosauksi par kleiner10, kas to pārbaudīs.

8. solis: Formatēšanas piemērošana

Tu vari piemērot šo jauno funkciju stundām, minutēm un sekundēm, pirms ievieto tos HTML saturā. Tādējādi pulkstenis izskatīsies daudz pievilcīgāk.

9. solis: Izkārtojuma uzlabošana

Tu vari vēl vairāk uzlabot pulksteni, pievienojot CSS stilus. Apsver, kā pulkstenis varētu izskatīties: centrālā izkārtojuma, lieli fonti, spilgtas fona krāsas. Tādējādi pulkstenis būs ne tikai funkcionāls, bet arī vizuāli pievilcīgs.

Kopsavilkums – Interaktīvais pulkstenis ar JavaScript

Tu esi tagad iemācījies, kā ar JavaScript izveidot interaktīvu pulksteni, kas nepārtraukti atjaunojas katrā sekundē. Šis projekts ir ne tikai viegli realizējams, bet arī sniedz iespēju padziļināt un paplašināt savas JavaScript prasmes.