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

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

Digitaalkell on JavaScripti parimate algajate projektide hulgas. Seda on üsna lihtne õppida mis tahes oskustega inimestele.





Sellest artiklist saate teada, kuidas luua HTML -i, CSS -i ja JavaScripti abil oma digitaalkell. Saate praktilisi kogemusi mitmesuguste JavaScripti kontseptsioonidega, nagu muutujate loomine, funktsioonide kasutamine, kuupäevadega töötamine, DOM-ile atribuutide juurde pääsemine ja lisamine.



mis on rakenduse tsoon

Alustame.



Digitaalse kella komponendid

Digitaalkell koosneb neljast osast: tund, minut, sekund ja meridiem.

Digitaalse kella projekti kaustastruktuur

Looge juurkaust, mis sisaldab HTML-, CSS- ja JavaScripti faile. Failidele saate anda mis tahes nime. Siin nimetatakse juurkausta Digitaalne kell . Vastavalt tavapärasele nimetamisviisile nimetatakse HTML-, CSS- ja JavaScripti faile index.html , stiilid.css ja script.js vastavalt.



Struktuuri lisamine digitaalkellale HTML -i abil

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





Digital Clock Using JavaScript






Siin, a div luuakse koos id kohta digitaalne kell . Seda div -d kasutatakse digitaalse kella kuvamiseks JavaScripti abil. stiilid.css on väline CSS -leht ja on lingitud HTML -lehega a abil silt. Sarnaselt script.js on väline JS -leht ja on lingitud HTML -lehega, kasutades < skript> silt.



Funktsionaalsuse lisamine digitaalsele kellale JavaScripti abil

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

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();

JavaScripti koodi mõistmine

The Aeg () ja uuenda () funktsioone kasutatakse digitaalsele kellale funktsionaalsuse lisamiseks.



Praeguse aja elementide hankimine

Praeguse kuupäeva ja kellaaja saamiseks peate looma kuupäeva objekti. See on süntaks kuupäevaobjekti loomiseks JavaScriptis:

var date = new Date();

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

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

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

Praeguse keskpäeva määramine (AM/PM)

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

var period = '';
if (hour >= 12) {
period = 'PM';
} else {
period = 'AM';
}

Praeguse tunni teisendamine 12-tunnises vormingus

Nüüd peate praeguse tunni teisendama 12-tunniseks vorminguks. Kui praegune tund on 0, siis värskendatakse praegust tundi 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: Teksti valimise, lõikamise, kopeerimise, kleepimise ja paremklõpsamise keelamine veebilehel

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

Aja elementide värskendamine

Kui need on alla 10 (ühekohalised), peate ajaelemente värskendama. Kõigile ühekohalistele ajaelementidele (tund, minut, sekund) lisatakse 0.

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

Aja elementide lisamine DOM -ile

Esiteks pääseb DOM -ile juurde sihtmärgi div -i ID abil ( digitaalne kell ). Seejärel määratakse ajaelemendid div -ile, kasutades internalText setter.

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

Kella värskendamine iga sekund

Kella uuendatakse iga sekundi abil setTimeout () meetod JavaScriptis.

setTimeout(Time, 1000);

Digitaalse kella kujundamine CSS -i abil

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

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

/* 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);
}

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

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

Kui soovite vaadata käesolevas artiklis kasutatud täielikku lähtekoodi, siis siin on GitHubi hoidla . Samuti, kui soovite vaadata selle projekti reaalajas versiooni, saate seda läbi vaadata GitHubi lehed .

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

Arendage muid JavaScripti projekte

Kui olete JavaScripti algaja ja soovite olla hea veebiarendaja, peate looma mõned head JavaScriptil põhinevad projektid. Need võivad lisada väärtust nii teie CV -le kui ka teie karjäärile.

Võite proovida mõnda projekti, näiteks kalkulaatorit, Hangmani mängu, Tic Tac Toe'i, JavaScripti ilmarakendust, interaktiivset sihtlehte, kaalujälgimise tööriista, kivipaberikääre jne.

kuidas Google Mapsi asukohta kinnitada

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

Jaga Jaga Piiksuma E -post Lihtsa kalkulaatori koostamine HTML -i, CSS -i ja JavaScripti abil

Lihtne, arvutatud kood on programmeerimise viis. Vaadake, kuidas luua oma kalkulaator HTML -is, CSS -is ja JS -is.

Loe edasi Seotud teemad Autori kohta Yuvraj Chandra(60 artiklit avaldatud)

Yuvraj on arvutiteaduse bakalaureuseõppe üliõpilane Indias Delhi ülikoolis. Ta on kirglik Full Stacki veebiarenduse vastu. Kui ta ei kirjuta, uurib ta erinevate tehnoloogiate sügavust.

Veel Yuvraj Chandrast

Telli meie uudiskiri

Liituge meie uudiskirjaga, et saada tehnilisi näpunäiteid, ülevaateid, tasuta e -raamatuid ja eksklusiivseid pakkumisi!

Tellimiseks klõpsake siin