Kā izveidot digitālo pulksteni, izmantojot HTML, CSS un JavaScript

Kā izveidot digitālo pulksteni, izmantojot HTML, CSS un JavaScript

Digitālais pulkstenis ir viens no labākajiem iesācēju projektiem JavaScript. To ir diezgan viegli iemācīties jebkura prasmju līmeņa cilvēkiem.





Šajā rakstā jūs uzzināsit, kā izveidot savu digitālo pulksteni, izmantojot HTML, CSS un JavaScript. Jūs iegūsit praktisku pieredzi ar dažādām JavaScript koncepcijām, piemēram, mainīgo izveidi, funkciju izmantošanu, darbu ar datumiem, piekļuvi īpašumiem un to pievienošanu DOM un daudz ko citu.



mainīt iphone dublēšanas vietu windows 10

Sāksim.





Digitālā pulksteņa sastāvdaļas

Digitālajam pulkstenim ir četras daļas: stunda, minūte, otrā un meridiem.

Digitālā pulksteņa projekta mapju struktūra

Izveidojiet saknes mapi, kurā ir HTML, CSS un JavaScript faili. Failus varat nosaukt, kā vien vēlaties. Šeit tiek nosaukta saknes mape Digitālais pulkstenis . Saskaņā ar standarta nosaukumu piešķiršanas noteikumiem tiek nosaukti HTML, CSS un JavaScript faili index.html , stili.css , un script.js attiecīgi.



Struktūras pievienošana digitālajam pulkstenim, izmantojot HTML

Atveriet index.html failu un ielīmējiet šādu kodu:





Digital Clock Using JavaScript






Lūk, a div ir izveidots ar id no digitālais pulkstenis . Šis div tiek izmantots, lai parādītu digitālo pulksteni, izmantojot JavaScript. stili.css ir ārēja CSS lapa un ir saistīta ar HTML lapu, izmantojot tagu. Līdzīgi, script.js ir ārēja JS lapa un ir saistīta ar HTML lapu, izmantojot < skripts> tagu.



Funkcionalitātes pievienošana digitālajam pulkstenim, izmantojot JavaScript

Atveriet script.js failu un ielīmējiet šādu kodu:

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

Izpratne par JavaScript kodu

The Laiks() un Atjaunināt() funkcijas tiek izmantotas, lai ciparu pulkstenim pievienotu funkcionalitāti.



Pašreizējā laika elementu iegūšana

Lai iegūtu pašreizējo datumu un laiku, jums ir jāizveido datuma objekts. Šī ir sintakse datuma objekta izveidei JavaScript:

var date = new Date();

Pašreizējais datums un laiks tiks saglabāti mapē datums mainīgais. Tagad no datuma objekta jāizņem pašreizējā stunda, minūte un sekunde.

date.getHours () , date.getMinutes (), un date.getSeconds () tiek izmantoti, lai no datuma objekta iegūtu attiecīgi pašreizējo stundu, minūti un sekundi. Visi laika elementi tiek saglabāti atsevišķos mainīgajos lielumos turpmākai darbībai.

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

Pašreizējā pusdienlaika piešķiršana (AM/PM)

Tā kā digitālais pulkstenis ir 12 stundu formātā, jums jāpiešķir atbilstošā meridiem atbilstoši pašreizējai stundai. Ja pašreizējā stunda ir lielāka vai vienāda ar 12, tad meridiem ir PM (Post Meridiem), pretējā gadījumā tas ir AM (Ante Meridiem).

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

Pašreizējās stundas konvertēšana 12 stundu formātā

Tagad jums jāpārvērš pašreizējā stunda 12 stundu formātā. Ja pašreizējā stunda ir 0, tad pašreizējā stunda tiek atjaunināta uz 12 (saskaņā ar 12 stundu formātu). Turklāt, ja pašreizējā stunda ir lielāka par 12, tā tiek samazināta par 12, lai tā būtu saskaņota ar 12 stundu laika formātu.

Saistīts: Kā atspējot teksta atlasi, izgriezt, kopēt, ielīmēt un ar peles labo pogu noklikšķināt uz Web lapas

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

Laika elementu atjaunināšana

Jums ir jāatjaunina laika elementi, ja tie ir mazāki par 10 (vienciparu). 0 ir pievienots visiem viencipara laika elementiem (stunda, minūte, sekunde).

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

Laika elementu pievienošana DOM

Pirmkārt, DOM piekļūst, izmantojot mērķa div ID ( digitālais pulkstenis ). Tad laika elementi tiek piešķirti div, izmantojot internalText uzstādītājs.

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

Pulksteņa atjaunināšana katru sekundi

Pulkstenis tiek atjaunināts katru sekundi, izmantojot setTimeout () metode JavaScript.

setTimeout(Time, 1000);

Digitālā pulksteņa veidošana, izmantojot CSS

Atveriet stili.css failu un ielīmējiet šādu kodu:

Saistīts: Kā izmantot CSS box-shadow: triki un piemēri

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

Iepriekš minēto CSS izmanto digitālā pulksteņa veidošanai. Šeit fonts Open Sans Condensed tiek izmantots, lai parādītu pulksteņa tekstu. Tas tiek importēts no Google fontiem, izmantojot @importēt . The #digitālais pulkstenis id selektoru izmanto, lai atlasītu mērķa div. ID atlasītājs izmanto id HTML elementa atribūtu, lai atlasītu konkrētu elementu.

Saistīts: Vienkārši CSS koda piemēri, kurus varat iemācīties 10 minūtēs

Ja vēlaties apskatīt visu šajā rakstā izmantoto avota kodu, šeit ir GitHub krātuve . Turklāt, ja vēlaties apskatīt šī projekta tiešo versiju, varat to pārbaudīt GitHub lapas .

Piezīme : Šajā rakstā izmantotais kods ir MIT licencēts .

Izstrādāt citus JavaScript projektus

Ja esat JavaScript iesācējs un vēlaties būt labs tīmekļa izstrādātājs, jums ir jāizveido daži labi uz JavaScript balstīti projekti. Tie var pievienot vērtību jūsu CV, kā arī jūsu karjerai.

Varat izmēģināt dažus projektus, piemēram, kalkulatoru, Hangman spēli, Tic Tac Toe, JavaScript laika lietotni, interaktīvu galveno lapu, svara konvertēšanas rīku, akmens papīra šķēres utt.

instalējiet Windows 10 uz USB diska

Ja jūs meklējat savu nākamo uz JavaScript balstītu projektu, vienkāršs kalkulators ir lieliska izvēle.

Kopīgot Kopīgot Čivināt E -pasts Kā izveidot vienkāršu kalkulatoru, izmantojot HTML, CSS un JavaScript

Vienkāršs, aprēķināts kods ir ceļš programmēšanas laikā. Pārbaudiet, kā izveidot savu kalkulatoru HTML, CSS un JS formātā.

Lasīt Tālāk Saistītās tēmas Par autoru Yuvraj Chandra(60 raksti publicēti)

Yuvraj ir datorzinātņu bakalaura students Deli universitātē, Indijā. Viņš aizraujas ar Full Stack tīmekļa izstrādi. Kad viņš neraksta, viņš pēta dažādu tehnoloģiju dziļumu.

Vairāk no Yuvraj Chandra

Abonējiet mūsu biļetenu

Pievienojieties mūsu informatīvajam izdevumam, lai iegūtu tehniskus padomus, pārskatus, bezmaksas e -grāmatas un ekskluzīvus piedāvājumus!

Noklikšķiniet šeit, lai abonētu