Tu nori įdiegti interaktyvų laikrodį savo svetainėje? Nesijaudink, tai paprasčiau nei atrodo! Šiame vadove parodysime, kaip su keliais kodo eilučiais sukurti laikrodį, kuris atnaujinamas kas sekundę. Taip gausi ne tik naudingą įrankį, bet ir efektyvų projektą, skirtą tavo JavaScript ir jQuery įgūdžiams tobulinti. Pradėkime!
Svarbiausi įžvalgos
- JavaScript naudojimas dinaminio laikrodžio kūrimui.
- setTimeout naudojimas, kad laiką atnaujintum reguliariai.
- Laiko formatavimas, kad jis būtų pateikiamas patrauklia forma.
Žingsnis po žingsnio vadovas
Žingsnis 1: Pagrindų sukūrimas
Pirmiausia pradėsime nuo projekto pagrindo nustatymo. Pirmas žingsnis yra ištrinti ankstesnį kodą, kurio mums nebereikia. Noriu sukurti aiškų pradžią.
Dabar pridėsime funkciją, atsakingą už laikrodžio paleidimą. Pavadink šią funkciją „startUhr“. Kad galėtume pasinaudoti dabartiniu laiku, naudosime new Date objektą.
Žingsnis 2: Laiko fiksavimas
Funkcijoje startUhr pirmiausia turi fiksuoti valandas, minutes ir sekundes. Tai gali lengvai padaryti per getHours(), getMinutes() ir getSeconds() metodus.
Žingsnis 3: Laikrodžio elementas HTML sukurti
Vėliau reikės HTML elemento, kuriame bus rodomas laikas. Priskirk šiam elementui ID „uhr“. Tai svarbu, nes vėliau kreipsiesi į šį elementą naudodamas šį ID.
Žingsnis 4: Atnaujinti laikrodžio turinį
Dabar, kai laikas buvo fiksuotas, atėjo laikas atnaujinti HTML laikrodžio turinį. Tai gali padaryti, nustatydamas „uhr“ elemento innerHTML reikšmę lygią formatuotam laikui. Laikas turėtų būti rodomas „HH:MM:SS“ formatu.
Žingsnis 5: Laiko reguliariai atnaujinimas
Norėdamas reguliariai atnaujinti laiką, gali naudoti setTimeout funkciją. Ši funkcija vykdo startUhr funkciją kas 500 milisekundžių.
Žingsnis 6: „onload“-renginys pridėti
Norėdamas užtikrinti, kad laikrodžio funkcija bus paleista, kai svetainė bus įkelta, turi nustatyti „onload“ renginį HTML srityje. Tam užrašyk: onload="startUhr()".
Žingsnis 7: Laiko formatavimas
Dabar turi užtikrinti, kad laikrodžio pateikimas atrodytų vienodai. Jei valandos, minutės ar sekundės yra mažesnės nei 10, jos turėtų būti pridedamos su pirmine nuliu. Tam sukuri funkciją, pavadintą kleiner10, kuri tai patikrina.
Žingsnis 8: Formatavimo taikymas
Turi šią naują funkciją taikyti valandoms, minutėms ir sekundėms, prieš jas įterpiant į HTML turinį. Taip laikrodis atrodys daug patraukliau.
Žingsnis 9: Išvaizdos gerinimas
Galite dar labiau patobulinti laikrodį pridėdami CSS stilių. Pagalvok, kaip laikrodis galėtų atrodyti: centrinis išdėstymas, didelės šriftai, ryškios fonų spalvos. Taip laikrodis bus ne tik funkcionalus, bet ir vizualiai patrauklus.
Santrauka – Interaktyvaus laikrodžio kūrimas su JavaScript
Dabar išmokai, kaip sukurti interaktyvų laikrodį su JavaScript, kuris nuolat atnaujinamas kas sekundę. Projektas yra ne tik paprastas, bet ir suteikia galimybę gilinti ir plėtoti tavo JavaScript žinias.
Dažniausiai užduodami klausimai
Kaip galiu pritaikyti laikrodžio atnaujinimo greitį?Keisdami vertę setTimeout() pakeisite atnaujinimo dažnį, pavyzdžiui, nuo 500 milisekundžių iki 1000 milisekundžių, kad laikrodis atnaujintų kartą per sekundę.
Kaip galiu integruoti laikrodį į svetainę?Integruokite JavaScript kodą savo HTML puslapio -tag'e ir pridėkite atitinkamą HTML elementą su ID „uhr“.
Ar galiu laikrodžio dizainą pritaikyti individualiai?Taip, galite pritaikyti laikrodžio stilių su CSS, kad pakeistumėte išvaizdą ir išdėstymą pagal savo pageidavimus.
Ar laikrodis palaiko 12 valandų formatą?Taip, galite pridėti sąlygą, kad pritaikytumėte 12 valandų formatą. Tam reikės šiek tiek pakeisti valandų formatavimą.
