Kaip sukurti skaitmeninį laikrodį naudojant HTML, CSS ir „JavaScript“

„Digital Clock“ yra vienas iš geriausių „JavaScript“ pradedančiųjų projektų. Tai gana lengva išmokti bet kokio lygio žmonėms.

Šiame straipsnyje sužinosite, kaip susikurti savo skaitmeninį laikrodį naudojant HTML, CSS ir „JavaScript“. Jūs gausite praktinės patirties naudodami įvairias „JavaScript“ koncepcijas, pvz., Kurdami kintamuosius, naudodami funkcijas, dirbdami su datomis, pasiekdami ir pridėdami ypatybes prie DOM ir dar daugiau.

Pradėkime.

Skaitmeninio laikrodžio komponentai

Skaitmeninį laikrodį sudaro keturios dalys: valanda, minutė, sekundė ir meridiemas.

Skaitmeninio laikrodžio projekto aplanko struktūra

Sukurkite šakninį aplanką, kuriame yra HTML, CSS ir „JavaScript“ failai. Failus galite pavadinti kuo tik norite. Čia vadinamas šakninis aplankas Skaitmeninis laikrodis. Pagal standartinę vardų suteikimo tvarką HTML, CSS ir „JavaScript“ failai yra pavadinti index.html, stiliai.cssir scenarijus.js atitinkamai.

Struktūros pridėjimas prie skaitmeninio laikrodžio naudojant HTML

Atidaryk index.html failas ir įklijuokite šį kodą:

Čia, a div yra sukurtas su id apie skaitmeninis laikrodis. Šis divas naudojamas skaitmeniniam laikrodžiui rodyti naudojant „JavaScript“. stiliai.css yra išorinis CSS puslapis ir susietas su HTML puslapiu naudojant a žyma. Panašiai, scenarijus.js yra išorinis JS puslapis ir yra susietas su HTML puslapiu naudojant <scenarijus> žyma.

Funkcionalumo pridėjimas prie skaitmeninio laikrodžio naudojant „JavaScript“

Atidaryk scenarijus.js failas ir įklijuokite šį kodą:

funkcija Laikas () {
// Kuriamas datos klasės objektas
var data = nauja data ();
// Gauti dabartinę valandą
var hour = data.getHours ();
// Gaukite dabartinę minutę
var minute = data.getMinutes ();
// Gaukite dabartinę sekundę
var second = data.getSeconds ();
// Kintamas laikyti AM / PM
var periodas = "";
// AM / PM paskyrimas pagal dabartinę valandą
jei (valanda> = 12) {
laikotarpis = "PM";
} Kitas {
laikotarpis = "AM";
}
// Valandos konvertavimas 12 valandų formatu
jei (valanda == 0) {
valanda = 12;
} Kitas {
jei (valanda> 12) {
valanda = valanda - 12;
}
}
// Valandos, minutės ir sekundės atnaujinimas
// jei jie yra mažesni nei 10
valanda = atnaujinimas (valanda);
minutė = atnaujinimas (minutė);
antras = atnaujinimas (antras);
// Laiko elementų pridėjimas prie div
document.getElementById ("skaitmeninis laikrodis"). internalText = valanda + ":" + minutė + ":" + sekundė + "" + periodas;
// Nustatykite laikmatį į 1 sek. (1000 ms)
setTimeout (laikas, 1000);
}
// Funkcija atnaujinti laiko elementus, jei jų yra mažiau nei 10
// Pridėti 0 prieš laiko elementus, jei jie yra mažesni nei 10
funkcijos atnaujinimas (t) {
jei (t <10) {
grąžinti "0" + t;
}
Kitas {
grįžti t;
}
}
Laikas();

Suprasti „JavaScript“ kodą

Laikas() ir atnaujinti () funkcijos yra naudojamos funkcijoms pridėti prie skaitmeninio laikrodžio.

Dabartinių laiko elementų gavimas

Norėdami gauti dabartinę datą ir laiką, turite sukurti datos objektą. Tai yra „Data“ objekto „JavaScript“ sukūrimo sintaksė:

var data = nauja data ();

Dabartinė data ir laikas bus saugomi data kintamasis. Dabar reikia išskirti dabartinę valandą, minutę ir sekundę iš datos objekto.

date.getHours (), data.getMinutes (), ir data.getSeconds () naudojami norint gauti atitinkamą valandą, minutę ir sekundę iš objekto datos. Visi laiko elementai yra saugomi atskiruose kintamuosiuose tolesnėms operacijoms.

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

Dabartinio „Meridiem“ (AM / PM) priskyrimas

Kadangi skaitmeninis laikrodis yra 12 valandų formato, turite priskirti atitinkamą meridiemą pagal dabartinę valandą. Jei dabartinė valanda yra didesnė arba lygi 12, meridiemas yra PM (Post Meridiem), kitaip AM (Ante Meridiem).

var periodas = "";
jei (valanda> = 12) {
laikotarpis = "PM";
} Kitas {
laikotarpis = "AM";
}

Dabartinės valandos konvertavimas 12 valandų formatu

Dabar turite konvertuoti dabartinę valandą į 12 valandų formatą. Jei dabartinė valanda yra 0, dabartinė valanda atnaujinama iki 12 (pagal 12 valandų formatą). Be to, jei dabartinė valanda yra didesnė nei 12, ji sumažinama 12, kad ji būtų suderinta su 12 valandų laiko formatu.

Susijęs: Kaip išjungti teksto pasirinkimą, iškirpti, kopijuoti, įklijuoti ir dešiniuoju pelės mygtuku spustelėkite tinklalapį

jei (valanda == 0) {
valanda = 12;
} Kitas {
jei (valanda> 12) {
valanda = valanda - 12;
}
}

Laiko elementų atnaujinimas

Turite atnaujinti laiko elementus, jei jie yra mažiau nei 10 (vieno skaitmens). 0 pridedamas prie visų vienaženklių laiko elementų (valanda, minutė, sekundė).

valanda = atnaujinimas (valanda);
minutė = atnaujinimas (minutė);
antras = atnaujinimas (antras);
funkcijos atnaujinimas (t) {
jei (t <10) {
grąžinti "0" + t;
}
Kitas {
grįžti t;
}
}

Laiko elementų pridėjimas prie DOM

Pirma, DOM pasiekiama naudojant tikslinio div ID (skaitmeninis laikrodis). Tada laiko elementai priskiriami div, naudojant internalText nustatytojas.

document.getElementById ("skaitmeninis laikrodis"). internalText = valanda + ":" + minutė + ":" + sekundė + "" + periodas;

Laikrodžio atnaujinimas kas sekundę

Laikrodis atnaujinamas kas sekundę naudojant setTimeout () metodas „JavaScript“.

setTimeout (laikas, 1000);

Skaitmeninio laikrodžio stilius naudojant CSS

Atidaryk stiliai.css failas ir įklijuokite šį kodą:

Susijęs: Kaip naudotis CSS box-shadow: gudrybės ir pavyzdžiai

/ * „Open Sans“ kondensuoto „Google“ šrifto importavimas * /
@import url (' https://fonts.googleapis.com/css2?family=Open+Sans+Condensed: wght @ 300 & display = swap ');
# skaitmeninis laikrodis {
fono spalva: # 66ffff;
plotis: 35%;
paraštė: auto;
„topding-top“: 50 taškų;
kamšalo apačia: 50 taškų;
šriftų šeima: „Open Sans Condensed“, sans-serif;
šrifto dydis: 64 taškų;
text-align: centre;
„box-shadow“: 0 4px 8px 0 rgba (0, 0, 0, 0,2), 0 6px 20px 0 rgba (0, 0, 0, 0,19);
}

Aukščiau pateiktas CSS naudojamas skaitmeniniam laikrodžiui kurti. Čia laikrodžio tekstui rodyti naudojamas „Open Sans Condensed“ šriftas. Jis importuotas iš „Google“ šriftų naudojant @import. # skaitmeninis laikrodis ID parinkiklis naudojamas tiksliniam div. ID parinkiklis naudoja id HTML elemento atributas tam tikram elementui pasirinkti.

Susijęs: Paprasti CSS kodo pavyzdžiai, kuriuos galite sužinoti per 10 minučių

Jei norite pažvelgti į visą šiame straipsnyje naudojamą šaltinio kodą, žiūrėkite „GitHub“ saugykla. Be to, jei norite pažvelgti į tiesioginę šio projekto versiją, galite tai patikrinti „GitHub“ puslapiai.

Pastaba: Šiame straipsnyje naudojamas kodas yra MIT licencijuota.

Kurkite kitus „JavaScript“ projektus

Jei esate „JavaScript“ pradininkas ir norite būti geras interneto kūrėjas, turite sukurti keletą gerų „JavaScript“ pagrįstų projektų. Jie gali suteikti pridėtinės vertės jūsų gyvenimo aprašymui ir karjerai.

Galite išbandyti kai kuriuos projektus, tokius kaip skaičiuoklė, „Hangman“ žaidimas, „Tic Tac Toe“, „JavaScript“ orų programa, interaktyvus nukreipimo puslapis, svorio konvertavimo įrankis, akmens popieriaus žirklės ir kt.

Jei ieškote kito „JavaScript“ pagrįsto projekto, paprastas skaičiuotuvas yra puikus pasirinkimas.

Kaip sukurti paprastą skaičiuoklę naudojant HTML, CSS ir „JavaScript“

Paprastas, apskaičiuotas kodas yra būdas eiti programuojant. Sužinokite, kaip sukurti savo skaičiuoklę HTML, CSS ir JS.

Skaitykite toliau

Apie autorių