Interaktiivne kell JavaScriptiga – juhend

Kas soovid oma veebilehele interaktiivset kella rakendada? Ära muretse, see on lihtsam, kui paistab! Selles juhendis näitame sulle, kuidas mõne koodireaga kell luua, mis värskendatakse sekundipõhiselt. Nii saad mitte ainult kasuliku tööriista, vaid ka tõhusa projekti, et parandada oma JavaScript- ja jQuery-oskusi. Alustame kohe!

Olulised tähelepanekud

• JavaScripti kasutamine dünaamilise kella loomiseks.
• setTimeouti kasutamine kellaaegade regulaarseks värskendamiseks.
• Kellaaegade vormindamine, et need kuvataks atraktiivses formaadis.

Juhend samm-sammult

Samm 1: Aluse loomine

Esiteks alustame oma projekti aluse seadmist. Esimene samm on kustutada eelmine kood, mida me enam ei vaja. Soovid luua selge alguse.

Nüüd lisame funktsiooni, mis vastutab kella käivitamise eest. Nimeks sellele funktsioonile „startUhr“. Et saaksime kasutada praegust aega, kasutame new Date-objekti.

Samm 2: Kellaaegade salvestamine

Funktsiooni startUhr sees pead esmalt salvestama tunnid, minutid ja sekundid. Seda saab hõlpsasti teha meetoditega getHours(), getMinutes() ja getSeconds().

Samm 3: Kella jaoks HTML-elementi loomine

Seejärel vajad HTML-elementi, kus kellaaeg kuvatakse. Määra sellele elemendile ID „uhr“. See on oluline, sest hiljem saad selle elemendi nüüdse ID abil üles leida.

Samm 4: Kella sisu seadmine

Nüüd, kui kellaaeg on salvestatud, on aeg värskendada kella HTML-sisu. Sa saad seda teha, seades „uhr“-elemendi innerHTML vormindatud ajale. Aeg peaks olema kujul „HH:MM:SS“.

Samm 5: Kellaaegade regulaarne värskendamine

Kellaaegade regulaarseks värskendamiseks saad kasutada setTimeout-funktsiooni. See funktsioon käivitab startUhr-funktsiooni iga 500 millisekundi järel.

Samm 6: „onload“-sündmuse lisamine

Kuna soovid veenduda, et kella funktsioon käivitub, kui veebileht laetakse, pead HTML-osasse seadma „onload“-sündmuse. Kirjuta sel eesmärgil: onload="startUhr()".

Samm 7: Aja vormindamine

Nüüd pead veenduma, et kellaaegade esitus on ühtlane. Kui tunnid, minutid või sekundid on väiksemad kui 10, tuleks need esitada juhtiva nulliga. Selleks loo funktsioon nimega kleiner10, mis seda kontrollib.

Samm 8: Vormindamise rakendamine

Pead selle uue funktsiooni rakendama tundide, minutite ja sekundite jaoks enne, kui need HTML-sisu sisse lisatakse. Nii näeb kell oluliselt atraktiivsem välja.

Samm 9: Layouti parandamine

Sa saad kella veelgi paremaks muuta, lisades CSS-i stiile. Mõtle sellele, kuidas kell võiks välja näha: tsentraalne joondamine, suured fondid, silmatorkavad taustavärvid. Nii muutub kell mitte ainult funktsionaalseks, vaid ka visuaalselt atraktiivseks.

Kokkuvõte – Interaktiivse kella loomine JavaScriptiga

Oled nüüd õppinud, kuidas luua interaktiivne kell JavaScriptiga, mis värskendab end pidevalt sekundipõhiselt. Projekt ei ole mitte ainult lihtne teostada, vaid pakub ka võimalust oma JavaScripti teadmisi süvendada ja laiendada.