Digitaalisen kellon luominen HTML: n, CSS: n ja JavaScriptin avulla

Digitaalikello on yksi parhaista aloittelijoiden projekteista JavaScriptissä. Se on melko helppo oppia mille tahansa taitotasolle.

Tässä artikkelissa opit rakentamaan oman digitaalisen kellon HTML: n, CSS: n ja JavaScriptin avulla. Saat käytännön kokemusta erilaisista JavaScript-käsitteistä, kuten muuttujien luomisesta, funktioiden käytöstä, päivämäärien käsittelemisestä, ominaisuuksien käyttämisestä ja lisäämisestä DOM: iin ja muusta.

Aloitetaan.

Digitaalisen kellon komponentit

Digitaalisella kellolla on neljä osaa: tunti, minuutti, sekunti ja meridiem.

Digitaalikelloprojektin kansiorakenne

Luo juurikansio, joka sisältää HTML-, CSS- ja JavaScript-tiedostot. Voit nimetä tiedostot mihin tahansa. Tässä juurikansio on nimetty Digitaalinen kello. Tavallisen nimeämiskäytännön mukaan HTML-, CSS- ja JavaScript-tiedostot nimetään index.html, styles.cssja script.js vastaavasti.

Rakenteen lisääminen digitaaliseen kelloon HTML: n avulla

Avaa index.html tiedosto ja liitä seuraava koodi:

Tässä, a div on luotu id / digitaalinen kello. Tätä div: ää käytetään digitaalisen kellon näyttämiseen JavaScriptiä käyttäen. styles.css on ulkoinen CSS-sivu ja on linkitetty HTML-sivuun a-koodilla tag. Samoin, script.js on ulkoinen JS-sivu ja linkitetään HTML-sivuun käyttämällä <käsikirjoitus> tag.

Toiminnallisuuden lisääminen digitaaliseen kelloon JavaScriptin avulla

Avaa script.js tiedosto ja liitä seuraava koodi:

funktio Aika () {
// Luodaan päivämääräluokan objekti
var date = uusi päivämäärä ();
// Hae nykyinen tunti
var tunti = date.getHours ();
// Hanki nykyinen minuutti
var minuutti = date.getMinutes ();
// Hanki nykyinen sekunti
var sekunti = date.getSeconds ();
// Muuttuu tallentamaan AM / PM
var period = "";
// Määritetään AM / PM nykyisen tunnin mukaan
jos (tunti> = 12) {
jakso = "PM";
} muu {
jakso = "AM";
}
// Muunna tunti 12 tunnin muodossa
jos (tunti == 0) {
tunti = 12;
} muu {
jos (tunti> 12) {
tunti = tunti - 12;
}
}
// Päivitetään tunti, minuutti ja sekunti
// jos ne ovat alle 10
tunti = päivitys (tunti);
minuutti = päivitys (minuutti);
toinen = päivitys (toinen);
// Aikaelementtien lisääminen div: iin
document.getElementById ("digitaalinen kello"). internalText = tunti + ":" + minuutti + ":" + sekunti + "" + jakso;
// Aseta ajastin 1 sekuntiin (1000 ms)
setTimeout (aika, 1000);
}
// Toiminto päivittää aikaelementit, jos ne ovat alle 10
// Liitä 0 ennen aikaelementtejä, jos ne ovat alle 10
funktion päivitys (t) {
jos (t <10) {
palauta "0" + t;
}
muu {
paluu t;
}
}
Aika();

JavaScript-koodin ymmärtäminen

Aika() ja päivittää() toimintoja käytetään lisäämään toimintoja digitaaliseen kelloon.

Nykyisten aikaelementtien saaminen

Nykyisen päivämäärän ja kellonajan saamiseksi sinun on luotava Date-objekti. Tämä on syntaksi Date-objektin luomiseen JavaScriptiin:

var date = uusi päivämäärä ();

Nykyinen päivämäärä ja kellonaika tallennetaan Päivämäärä muuttuja. Nyt sinun on purettava nykyinen tunti, minuutti ja sekunti päivämääräobjektista.

date.getHours (), date.getMinutes (), ja date.getSeconds () käytetään nykyisen tunnin, minuutin ja sekunnin saamiseksi päivämääräobjektista. Kaikki aikaelementit tallennetaan erillisiin muuttujiin jatkotoimenpiteitä varten.

var tunti = date.getHours ();
var minuutti = date.getMinutes ();
var sekunti = date.getSeconds ();

Nykyisen Meridiemin (AM / PM) määrittäminen

Koska digitaalinen kello on 12 tunnin muodossa, sinun on määritettävä sopiva meridiem nykyisen tunnin mukaan. Jos nykyinen tunti on suurempi tai yhtä suuri kuin 12, meridiem on PM (Post Meridiem), muuten se on AM (Ante Meridiem).

var period = "";
jos (tunti> = 12) {
jakso = "PM";
} muu {
jakso = "AM";
}

Nykyisen tunnin muuntaminen 12 tunnin muodossa

Nyt sinun on muunnettava nykyinen tunti 12 tunnin muotoon. Jos nykyinen tunti on 0, nykyinen tunti päivitetään arvoon 12 (12 tunnin muodon mukaan). Lisäksi, jos nykyinen tunti on yli 12, se vähenee 12: lla, jotta se pysyy 12 tunnin aikamuodon mukaisena.

Liittyvät: Kuinka poistaa tekstin valinta, leikata, kopioida, liittää ja napsauttaa hiiren kakkospainikkeella verkkosivua

jos (tunti == 0) {
tunti = 12;
} muu {
jos (tunti> 12) {
tunti = tunti - 12;
}
}

Aikaelementtien päivittäminen

Sinun on päivitettävä aikaelementit, jos ne ovat alle 10 (yksinumeroinen). 0 lisätään kaikkiin yksinumeroisiin aikaelementteihin (tunti, minuutti, sekunti).

tunti = päivitys (tunti);
minuutti = päivitys (minuutti);
toinen = päivitys (toinen);
funktion päivitys (t) {
jos (t <10) {
palauta "0" + t;
}
muu {
paluu t;
}
}

Aikaelementtien lisääminen DOM: iin

Ensinnäkin DOM: iin pääsee käyttämällä kohde div: n tunnusta (digitaalinen kello). Sitten aikaelementit osoitetaan div: lle käyttämällä internalText asettaja.

document.getElementById ("digitaalinen kello"). internalText = tunti + ":" + minuutti + ":" + sekunti + "" + jakso;

Kellon päivittäminen joka sekunti

Kello päivitetään joka sekunti käyttämällä setTimeout () menetelmä JavaScriptissä.

setTimeout (aika, 1000);

Digitaalisen kellon muotoilu CSS: n avulla

Avaa styles.css tiedosto ja liitä seuraava koodi:

Liittyvät: Kuinka käyttää CSS box-shadow: temppuja ja esimerkkejä

/ * Tuodaan avoimen sanan tiivistetty Google-fontti * /
@import url (' https://fonts.googleapis.com/css2?family=Open+Sans+Condensed: wght @ 300 & display = vaihda ');
#digitaalinen kello {
taustaväri: # 66ffff;
leveys: 35%;
marginaali: auto;
toppaus: 50px;
pehmustepohja: 50px;
font-family: 'Avoin Sans Tiivistetty', sans-serif;
fontin koko: 64px;
tekstin tasaus: keskellä;
laatikko-varjo: 0 4px 8px 0 rgba (0, 0, 0, 0,2), 0 6px 20px 0 rgba (0, 0, 0, 0,19);
}

Yllä olevaa CSS: ää käytetään digitaalisen kellon muotoiluun. Tässä Open Sans Condensed -fonttia käytetään kellon tekstin näyttämiseen. Se on tuotu Google-kirjasimista @tuonti. #digitaalinen kello id-valitsinta käytetään kohden div valitsemiseen. Id-valitsin käyttää id HTML-elementin attribuutti tietyn elementin valitsemiseksi.

Liittyvät: Yksinkertaisia ​​CSS-koodiesimerkkejä, jotka voit oppia 10 minuutissa

Jos haluat tutustua tässä artikkelissa käytettyyn täydelliseen lähdekoodiin, tässä on GitHub-arkisto. Lisäksi, jos haluat tutustua tämän projektin live-versioon, voit tarkistaa sen läpi GitHub-sivut.

Merkintä: Tässä artikkelissa käytetty koodi on MIT-lisensoitu.

Kehitä muita JavaScript-projekteja

Jos olet aloittelija JavaScriptissä ja haluat olla hyvä web-kehittäjä, sinun on rakennettava hyviä JavaScript-pohjaisia ​​projekteja. Ne voivat lisätä arvoa ansioluettelollesi ja urallesi.

Voit kokeilla joitain projekteja, kuten Laskin, Hangman-peli, Tic Tac Toe, JavaScript-sääsovellus, interaktiivinen aloitussivu, Paino-muunnostyökalu, Kivipaperisakset jne.

Jos etsit seuraavaa JavaScript-pohjaista projektiasi, yksinkertainen laskin on erinomainen valinta.

Kuinka luoda yksinkertainen laskin HTML: n, CSS: n ja JavaScriptin avulla

Yksinkertainen, laskettu koodi on oikea tapa ohjelmoida. Katso, miten voit luoda oman laskimen HTML-, CSS- ja JS-tiedostoihin.

Lue seuraava

Kirjailijasta