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

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

Digitaalikello on yksi JavaScriptin parhaista aloittelijaprojekteista. Se on melko helppo oppia kaiken tasoisille ihmisille.





Tässä artikkelissa opit rakentamaan oman digitaalisen kellon HTML-, CSS- ja JavaScript -tiedostojen avulla. Saat käytännön kokemusta eri JavaScript-konsepteista, kuten muuttujien luomisesta, toimintojen käytöstä, päivämäärien käsittelystä, ominaisuuksien käyttämisestä ja lisäämisestä DOMiin ja paljon muuta.



miten äänen kuvaus poistetaan käytöstä prime -tilassa

Aloitetaan.





Digitaalikellon osat

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

Digitaalikello -projektin kansiorakenne

Luo juurikansio, joka sisältää HTML-, CSS- ja JavaScript -tiedostot. Voit nimetä tiedostot haluamallasi tavalla. Tässä on juurihakemiston nimi Digitaalinen kello . Normaalin nimeämiskäytännön mukaan HTML-, CSS- ja JavaScript -tiedostot nimetään index.html , tyylejä. css ja script.js vastaavasti.



Rakenteen lisääminen digitaalikelloon HTML: n avulla

Avaa index.html tiedosto ja liitä seuraava koodi:





Digital Clock Using JavaScript






Tässä, a div luodaan merkillä id / digitaalinen kello . Tätä diviä käytetään digitaalisen kellon näyttämiseen JavaScriptin avulla. tyylejä. css on ulkoinen CSS -sivu ja se on linkitetty HTML -sivulle käyttämällä tag. Samoin, script.js on ulkoinen JS -sivu ja se on linkitetty HTML -sivulle käyttämällä < käsikirjoitus> tag.



Toiminnallisuuden lisääminen digitaalikelloon JavaScriptin avulla

Avaa script.js tiedosto ja liitä seuraava koodi:

function Time() {
// Creating object of the Date class
var date = new Date();
// Get current hour
var hour = date.getHours();
// Get current minute
var minute = date.getMinutes();
// Get current second
var second = date.getSeconds();
// Variable to store AM / PM
var period = '';
// Assigning AM / PM according to the current hour
if (hour >= 12) {
period = 'PM';
} else {
period = 'AM';
}
// Converting the hour in 12-hour format
if (hour == 0) {
hour = 12;
} else {
if (hour > 12) {
hour = hour - 12;
}
}
// Updating hour, minute, and second
// if they are less than 10
hour = update(hour);
minute = update(minute);
second = update(second);
// Adding time elements to the div
document.getElementById('digital-clock').innerText = hour + ' : ' + minute + ' : ' + second + ' ' + period;
// Set Timer to 1 sec (1000 ms)
setTimeout(Time, 1000);
}
// Function to update time elements if they are less than 10
// Append 0 before time elements if they are less than 10
function update(t) {
if (t <10) {
return '0' + t;
}
else {
return t;
}
}
Time();

JavaScript -koodin ymmärtäminen

The Aika() ja päivittää() toimintoja käytetään toimintojen lisäämiseen digitaalikelloon.



Nykyisen ajan elementtien saaminen

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

var date = new Date();

Nykyinen päivämäärä ja kellonaika tallennetaan Päivämäärä muuttuja. Nyt sinun täytyy poimia 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 jatko -operaatioita varten.

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

Nykyisen keskipäivän määrittäminen (AM/PM)

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

var period = '';
if (hour >= 12) {
period = 'PM';
} else {
period = '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 12: ksi (12 tunnin muodon mukaan). Lisäksi jos nykyinen tunti on suurempi kuin 12, sitä lyhennetään 12: lla, jotta se pysyy 12 tunnin aikamuodon mukaisena.

Aiheeseen liittyviä: Tekstin valinnan, leikkaamisen, kopioinnin, liittämisen ja hiiren kakkospainikkeen poistaminen käytöstä verkkosivulla

if (hour == 0) {
hour = 12;
} else {
if (hour > 12) {
hour = hour - 12;
}
}

Aikaelementtien päivittäminen

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

hour = update(hour);
minute = update(minute);
second = update(second);
function update(t) {
if (t <10) {
return '0' + t;
}
else {
return t;
}
}

Aikaelementtien lisääminen DOM: ään

Ensinnäkin DOM -palveluun pääsee kohde -div -tunnuksella ( digitaalinen kello ). Sitten aikaelementit osoitetaan diville käyttämällä sisäinen teksti asettaja.

document.getElementById('digital-clock').innerText = hour + ' : ' + minute + ' : ' + second + ' ' + period;

Kellon päivittäminen sekunnin välein

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

setTimeout(Time, 1000);

Digitaalisen kellon muotoilu CSS: n avulla

Avaa tyylejä. css tiedosto ja liitä seuraava koodi:

Aiheeseen liittyviä: CSS-laatikon varjon käyttö: temppuja ja esimerkkejä

/* Importing Open Sans Condensed Google font */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@300&display=swap');

#digital-clock {
background-color: #66ffff;
width: 35%;
margin: auto;
padding-top: 50px;
padding-bottom: 50px;
font-family: 'Open Sans Condensed', sans-serif;
font-size: 64px;
text-align: center;
box-shadow: 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ä kellon tekstin näyttämiseen käytetään Open Sans Condensed -kirjasinta. Se tuodaan Googlen kirjasimista käyttämällä @tuonti . The #digitaalinen kello id -valitsimella valitaan kohde div. ID -valitsin käyttää id HTML -elementin määritteen avulla voit valita tietyn elementin.

Aiheeseen liittyviä: Yksinkertaisia ​​CSS -koodiesimerkkejä, jotka opit 10 minuutissa

Jos haluat tarkastella tässä artikkelissa käytettyä lähdekoodia, tässä on GitHub -arkisto . Lisäksi, jos haluat katsoa tämän projektin live -versiota, voit tarkistaa sen läpi GitHub -sivut .

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

Kehitä muita JavaScript -projekteja

Jos olet JavaScriptin aloittelija ja haluat olla hyvä web-kehittäjä, sinun on rakennettava hyviä JavaScript-pohjaisia ​​projekteja. Ne voivat tuoda lisäarvoa ansioluetteloosi ja uraasi.

Voit kokeilla joitain projekteja, kuten laskin, Hangman -peli, Tic Tac Toe, JavaScript -sääsovellus, interaktiivinen aloitussivu, painonmuuntotyökalu, kalliopaperin sakset jne.

kuinka luoda hajakaavio Excelissä

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

Jaa Jaa Tweet Sähköposti Yksinkertaisen laskimen rakentaminen HTML: n, CSS: n ja JavaScriptin avulla

Yksinkertainen, laskettu koodi on tapa edetä ohjelmoitaessa. Katso, miten voit rakentaa oman laskimen HTML-, CSS- ja JS -muotoon.

Lue seuraava Liittyvät aiheet Kirjailijasta Yuvraj Chandra(60 artikkelia julkaistu)

Yuvraj on tietojenkäsittelytieteen perusopiskelija Delhin yliopistossa Intiassa. Hän on intohimoinen Full Stack Web -kehityksestä. Kun hän ei kirjoita, hän tutkii eri tekniikoiden syvyyttä.

Lisää Yuvraj Chandralta

tilaa uutiskirjeemme

Liity uutiskirjeeseemme saadaksesi teknisiä vinkkejä, arvosteluja, ilmaisia ​​e -kirjoja ja ainutlaatuisia tarjouksia!

Klikkaa tästä tilataksesi