Kuidas luua digitaalset kella HTML-i, CSS-i ja JavaScripti abil

Digitaalne kell on JavaScripti parimate algajate projektide hulgas. Igasuguse oskustasemega inimeste jaoks on seda üsna lihtne õppida.

Sellest artiklist saate teada, kuidas HTML-i, CSS-i ja JavaScripti abil oma digitaalset kella ehitada. Saad praktilisi kogemusi mitmesuguste JavaScripti mõistetega, nagu muutujate loomine, funktsioonide kasutamine, töötamine kuupäevadega, juurdepääs DOM-ile ja atribuutidele lisamine ning palju muud.

Alustame.

Digitaalse kella komponendid

Digitaalsel kellal on neli osa: tund, minut, sekund ja meridiem.

Digitaalse kella projekti kausta struktuur

Looge juurkaust, mis sisaldab HTML-, CSS- ja JavaScripti faile. Võite failidele nimetada kõik, mida soovite. Siin nimetatakse juurkaust Digitaalne kell. Vastavalt tavapärasele nimetamisviisile nimetatakse HTML-, CSS- ja JavaScripti faile index.html, stiilid.cssja script.js vastavalt.

Struktuuri lisamine digitaalsele kellale HTML-i abil

Ava index.html fail ja kleepige järgmine kood:

Siin, a div on loodud id kohta digitaalkell. Seda jaotist kasutatakse digitaalse kella kuvamiseks JavaScripti abil. stiilid.css on väline CSS-leht ja on HTML-lehega lingitud a abil silt. Samamoodi script.js on väline JS-leht ja on HTML-lehega lingitud, kasutades <skript> silt.

Funktsionaalsuse lisamine digitaalsele kellale JavaScripti abil

Ava script.js fail ja kleepige järgmine kood:

funktsioon Aeg () {
// Kuupäeva klassi objekti loomine
var date = uus kuupäev ();
// Hankige praegune tund
var tund = kuupäev.getHours ();
// Hangi praegune minut
var minute = kuupäev.getMinutes ();
// Saada praegune sekund
var second = kuupäev.getSeconds ();
// Muutuv AM / PM salvestamiseks
var periood = "";
// AM / PM määramine vastavalt praegusele tunnile
kui (tund> = 12) {
periood = "PM";
} muu {
periood = "AM";
}
// Tunni teisendamine 12-tunnises vormingus
kui (tund == 0) {
tund = 12;
} muu {
kui (tund> 12) {
tund = tund - 12;
}
}
// Tunni, minuti ja sekundi värskendamine
// kui need on väiksemad kui 10
tund = uuendus (tund);
minut = uuendus (minut);
teine ​​= uuendus (teine);
// Ajaelementide lisamine div-le
document.getElementById ("digitaalkell"). internalText = tund + ":" + minut + ":" + sekund + "" + periood;
// Seadke taimer 1 sekundiks (1000 ms)
setTimeout (aeg, 1000);
}
// Funktsioon ajaelementide värskendamiseks, kui need on väiksemad kui 10
// Lisage 0 enne ajaelemente, kui need on väiksemad kui 10
funktsiooni värskendus (t) {
kui (t <10) {
tagastage "0" + t;
}
veel {
tagasitulek t;
}
}
Aeg ();

JavaScripti koodi mõistmine

The Aeg () ja värskendus () funktsioone kasutatakse digitaalse kella funktsionaalsuse lisamiseks.

Praeguste ajaelementide hankimine

Praeguse kuupäeva ja kellaaja saamiseks peate looma objekti Kuupäev. See on süntaks kuupäeva objekti JavaScripti loomiseks:

var date = uus kuupäev ();

Praegune kuupäev ja kellaaeg salvestatakse kuupäev muutuv. Nüüd peate kuupäevaobjektist välja võtma praeguse tunni, minuti ja sekundi.

date.getHours (), date.getMinutes (), ja date.getSeconds () kasutatakse praeguse tunni, minuti ja sekundi saamiseks kuupäevaobjektist. Kõik ajaelemendid salvestatakse edasiste toimingute jaoks eraldi muutujatesse.

var tund = kuupäev.getHours ();
var minute = kuupäev.getMinutes ();
var second = kuupäev.getSeconds ();

Praeguse Meridiemi (AM / PM) määramine

Kuna digitaalkell on 12-tunnises formaadis, peate määrama sobiva meridiemi vastavalt praegusele tunnile. Kui praegune tund on suurem või võrdne 12, siis on meridiem PM (post Meridiem), vastasel juhul on see AM (Ante Meridiem).

var periood = "";
kui (tund> = 12) {
periood = "PM";
} muu {
periood = "AM";
}

Praeguse tunni teisendamine 12-tunnises vormingus

Nüüd peate praeguse tunni teisendama 12-tunniseks vorminguks. Kui praegune tund on 0, värskendatakse praegune tund 12-le (vastavalt 12-tunnisele vormingule). Samuti, kui praegune tund on suurem kui 12, vähendatakse seda 12 võrra, et see oleks 12-tunnise ajavorminguga joondatud.

Seotud: Veebilehe tekstivaliku, lõikamise, kopeerimise, kleepimise ja paremklõpsamise keelamine

kui (tund == 0) {
tund = 12;
} muu {
kui (tund> 12) {
tund = tund - 12;
}
}

Ajaelementide värskendamine

Ajaelemendid peate värskendama, kui need on alla 10 (ühekohaline). Kõigile ühekohalistele ajaelementidele (tund, minut, sekund) lisatakse 0.

tund = uuendus (tund);
minut = uuendus (minut);
teine ​​= uuendus (teine);
funktsiooni värskendus (t) {
kui (t <10) {
tagastage "0" + t;
}
veel {
tagasitulek t;
}
}

Ajaelementide lisamine DOM-i

Esiteks pöördutakse DOM-i juurde, kasutades div-i sihtmärki (digitaalkell). Seejärel määratakse ajaelemendid div-le, kasutades internalText setter.

document.getElementById ("digitaalkell"). internalText = tund + ":" + minut + ":" + sekund + "" + periood;

Kella värskendamine iga sekundi järel

Kella värskendatakse iga sekundi abil setTimeout () meetod JavaScripti.

setTimeout (aeg, 1000);

Digitaalse kella kujundamine CSS-i abil

Ava stiilid.css fail ja kleepige järgmine kood:

Seotud: CSS box-shadow'i kasutamine: nipid ja näited

/ * Open Sans'i kondenseeritud Google'i fondi importimine * /
@impl url (' https://fonts.googleapis.com/css2?family=Open+Sans+Condensed: wght @ 300 & display = swap ');
# digikell {
taustavärv: # 66ffff;
laius: 35%;
veeris: auto;
top-top: 50px;
polsterduspõhi: 50px;
font-perekond: 'Open Sans Condens', sans-serif;
fondi suurus: 64 pikslit;
teksti joondamine: keskel;
kasti vari: 0 4px 8px 0 rgba (0, 0, 0, 0,2), 0 6px 20px 0 rgba (0, 0, 0, 0,19);
}

Ülaltoodud CSS-i kasutatakse digitaalse kella kujundamiseks. Siin kasutatakse kella teksti kuvamiseks fondi Open Sans Condensed. See imporditi Google'i fontidest kasutades @import. The # digitaalkell id-valijat kasutatakse sihtmärgi div valimiseks. ID-valija kasutab id HTML-elemendi atribuut konkreetse elemendi valimiseks.

Seotud: Lihtsad CSS-koodinäited, mida saate õppida 10 minutiga

Kui soovite vaadata selles artiklis kasutatud täielikku lähtekoodi, siis siin GitHubi hoidla. Samuti, kui soovite heita pilgu selle projekti otseülekandele, saate selle läbi vaadata GitHubi lehed.

Märge: Selles artiklis kasutatud kood on MIT litsentsitud.

Arendage muid JavaScripti projekte

Kui olete JavaScripti algaja ja soovite olla hea veebiarendaja, peate ehitama mõned head JavaScripti põhised projektid. Need võivad anda lisaväärtust nii teie jätkamisele kui ka teie karjäärile.

Võite proovida mõnda projekti, nagu kalkulaator, mäng Hangman, Tic Tac Toe, JavaScripti ilmarakendus, interaktiivne sihtleht, kaalu teisendamise tööriist, kivipaberikäärid jne.

Kui otsite oma järgmist JavaScripti põhist projekti, on suurepärane valik lihtne kalkulaator.

Kuidas luua lihtsat kalkulaatorit HTML-i, CSS-i ja JavaScripti abil

Programmeerimisel tuleb minna lihtsa, arvutatud koodiga. Vaadake, kuidas HTML-i, CSS-is ja JS-is oma kalkulaatorit luua.

Loe edasi

Autori kohta