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

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

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





Šiame straipsnyje sužinosite, kaip sukurti savo skaitmeninį laikrodį naudojant HTML, CSS ir „JavaScript“. Įgysite praktinės patirties naudodami įvairias „JavaScript“ koncepcijas, pvz., Kintamųjų kūrimą, funkcijų naudojimą, darbą su datomis, prieigą prie nuosavybių ir jų pridėjimą prie DOM ir kt.



Kaip atsisiųsti visas nuotraukas iš samsung debesies

Pradėkime.





Skaitmeninio laikrodžio komponentai

Skaitmeninis laikrodis turi keturias dalis: valandą, minutę, antrą ir dienovidinį.

Skaitmeninio laikrodžio projekto aplanko struktūra

Sukurkite šakninį aplanką, kuriame yra HTML, CSS ir „JavaScript“ failai. Failus galite pavadinti bet kuo. Čia pavadintas šakninis aplankas Skaitmeninis laikrodis . Pagal standartinę pavadinimo konvenciją HTML, CSS ir „JavaScript“ failai yra pavadinti index.html , stilius.css , ir script.js atitinkamai.



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

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





Digital Clock Using JavaScript






Čia, a div yra sukurtas su id apie skaitmeninis laikrodis . Šis skyrius naudojamas skaitmeniniam laikrodžiui rodyti naudojant „JavaScript“. stilius.css yra išorinis CSS puslapis ir yra susietas su HTML puslapiu naudojant žyma. Panašiai, script.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 script.js failą ir įklijuokite šį kodą:

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“ kodo supratimas

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



Dabartinio laiko elementų gavimas

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

var date = new Date();

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

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

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

Dabartinio vidurdienio priskyrimas (AM/PM)

Kadangi skaitmeninis laikrodis yra 12 valandų formato, turite priskirti atitinkamą dienovidinį pagal esamą valandą. Jei dabartinė valanda yra didesnė arba lygi 12, tada dienovidinis yra PM („Post Meridiem“), kitaip - AM (Ante Meridiem).

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

Dabartinės valandos konvertavimas 12 valandų formatu

Dabar reikia konvertuoti dabartinę valandą į 12 valandų formatą. Jei dabartinė valanda yra 0, tada dabartinė valanda atnaujinama iki 12 (pagal 12 valandų formatą). Be to, jei dabartinė valanda yra didesnė nei 12, ji sumažinama 12, kad ji atitiktų 12 valandų laiko formatą.

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

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

Laiko elementų atnaujinimas

Turite atnaujinti laiko elementus, jei jie yra mažesni nei 10 (vieno skaitmens). Prie visų vieno skaitmenų laiko elementų (valanda, minutė, sekundė) pridedamas 0.

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

Laiko elementų pridėjimas prie DOM

Pirma, DOM pasiekiamas naudojant tikslinės div ID ( skaitmeninis laikrodis ). Tada laiko elementai priskiriami div, naudojant internalText seteris.

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

Laikrodžio atnaujinimas kas sekundę

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

setTimeout(Time, 1000);

Skaitmeninio laikrodžio stilius naudojant CSS

Atidaryk stilius.css failą ir įklijuokite šį kodą:

Susijęs: Kaip naudoti „CSS box-shadow“: gudrybės ir pavyzdžiai

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

Aukščiau pateiktas CSS naudojamas skaitmeninio laikrodžio stiliui. Čia šriftas „Open Sans Condensed“ naudojamas rodyti laikrodžio tekstą. Jis importuotas iš „Google“ šriftų naudojant @importas . The #skaitmeninis laikrodis id selektorius naudojamas tikslui div. ID parinkiklis naudoja id HTML elemento atributą, kad pasirinktumėte konkretų elementą.

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

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

Pastaba : Šiame straipsnyje naudojamas kodas MIT licencija .

Kurkite kitus „JavaScript“ projektus

Jei esate „JavaScript“ pradedantysis ir norite būti geras žiniatinklio kūrėjas, turite sukurti gerus „JavaScript“ pagrįstus projektus. Jie gali suteikti pridėtinės vertės jūsų gyvenimo aprašymui ir jūsų karjerai.

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

kaip rasti savo vaizdo įrašus „Facebook“

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

Dalintis Dalintis „Tweet“ Paštu Kaip sukurti paprastą skaičiuotuvą naudojant HTML, CSS ir „JavaScript“

Paprastas, apskaičiuotas kodas yra programavimo būdas. Patikrinkite, kaip sukurti savo skaičiuotuvą HTML, CSS ir JS.

Skaityti toliau Susijusios temos Apie autorių Yuvraj Chandra(Paskelbti 60 straipsnių)

Yuvraj yra kompiuterių mokslo bakalauro studentas Delyje, Indijoje. Jis aistringas „Full Stack“ žiniatinklio kūrimui. Kai jis nerašo, jis tyrinėja skirtingų technologijų gylį.

Daugiau iš Yuvraj Chandra

Prenumeruokite mūsų naujienlaiškį

Prisijunkite prie mūsų naujienlaiškio, kad gautumėte techninių patarimų, apžvalgų, nemokamų el. Knygų ir išskirtinių pasiūlymų!

Norėdami užsiprenumeruoti, spustelėkite čia