Sådan oprettes et digitalt ur ved hjælp af HTML, CSS og JavaScript

Det digitale ur er blandt de bedste nybegynderprojekter i JavaScript. Det er ret nemt at lære for folk på ethvert niveau.

I denne artikel lærer du, hvordan du bygger et eget digitalt ur ved hjælp af HTML, CSS og JavaScript. Du får praktisk erfaring med forskellige JavaScript-koncepter som at oprette variabler, bruge funktioner, arbejde med datoer, få adgang til og tilføje egenskaber til DOM og mere.

Lad os komme igang.

Komponenter i det digitale ur

Det digitale ur har fire dele: time, minut, sekund og meridiem.

Mappestruktur for det digitale urprojekt

Opret en rodmappe, der indeholder HTML-, CSS- og JavaScript-filer. Du kan navngive filerne, hvad du vil. Her navngives rodmappen Digital-ur. I henhold til standardnavngivningskonventionen navngives HTML-, CSS- og JavaScript-filer index.html, styles.cssog script.js henholdsvis.

Tilføjelse af struktur til det digitale ur ved hjælp af HTML

Åbn index.html fil og indsæt følgende kode:

Her, en div er oprettet med en

id af digitalt ur. Denne div bruges til at vise det digitale ur ved hjælp af JavaScript. styles.css er en ekstern CSS-side og er linket til HTML-siden ved hjælp af en tag. Tilsvarende script.js er en ekstern JS-side og er linket til HTML-siden ved hjælp af <script> tag.

Tilføjelse af funktionalitet til det digitale ur ved hjælp af JavaScript

Åbn script.js fil og indsæt følgende kode:

funktionstid () {
// Oprettelse af objekt fra klassen Date
var dato = ny dato ();
// Få aktuel time
var time = date.getHours ();
// Få aktuelt minut
var minut = date.getMinutes ();
// Bliv aktuelt andet
var sekund = date.getSeconds ();
// Variabel til at gemme AM / PM
var periode = "";
// Tildeling af AM / PM i henhold til den aktuelle time
hvis (time> = 12) {
periode = "PM";
} andet {
periode = "AM";
}
// Konvertering af timen i 12-timers format
hvis (time == 0) {
time = 12;
} andet {
hvis (time> 12) {
time = time - 12;
}
}
// Opdatering af time, minut og sekund
// hvis de er mindre end 10
time = opdatering (time);
minut = opdatering (minut);
anden = opdatering (anden);
// Tilføjelse af tidselementer til div
document.getElementById ("digital-ur"). innerText = time + ":" + minut + ":" + sekund + "" + periode;
// Indstil timer til 1 sek (1000 ms)
setTimeout (tid, 1000);
}
// Funktion til opdatering af tidselementer, hvis de er mindre end 10
// Tilføj 0 før tidselementer, hvis de er mindre end 10
funktionsopdatering (t) {
hvis (t <10) {
returner "0" + t;
}
andet {
returnere t;
}
}
Tid();

Forståelse af JavaScript-koden

Det Tid() og opdater () funktioner bruges til at tilføje funktionalitet til det digitale ur.

Få de aktuelle tidselementer

For at få den aktuelle dato og tid skal du oprette et datoobjekt. Dette er syntaksen for oprettelse af et datoobjekt i JavaScript:

var dato = ny dato ();

Den aktuelle dato og tid gemmes i dato variabel. Nu skal du udtrække den aktuelle time, minut og sekund fra datoobjektet.

date.getHours (), date.getMinutes (), og date.getSeconds () bruges til at hente den aktuelle time, minut og sekund fra datoobjektet. Alle tidselementerne er gemt i separate variabler til yderligere operationer.

var time = date.getHours ();
var minut = date.getMinutes ();
var sekund = date.getSeconds ();

Tildeling af det aktuelle meridiem (AM / PM)

Da det digitale ur er i et 12-timers format, skal du tildele det relevante meridiem i henhold til den aktuelle time. Hvis den aktuelle time er større end eller lig med 12, er meridiemet PM (Post Meridiem) ellers er det AM (Ante Meridiem).

var periode = "";
hvis (time> = 12) {
periode = "PM";
} andet {
periode = "AM";
}

Konvertering af den aktuelle time i 12-timers format

Nu skal du konvertere den aktuelle time til et 12-timers format. Hvis den aktuelle time er 0, opdateres den aktuelle time til 12 (i henhold til 12-timers format). Hvis den aktuelle time er større end 12, reduceres den også med 12 for at holde den tilpasset 12-timersformatet.

Relaterede: Sådan deaktiveres tekstvalg, klipning, kopiering, indsætning og højreklik på en webside

hvis (time == 0) {
time = 12;
} andet {
hvis (time> 12) {
time = time - 12;
}
}

Opdatering af tidselementerne

Du skal opdatere tidselementerne, hvis de er mindre end 10 (enkeltcifret). 0 er tilføjet til alle de encifrede tidselementer (time, minut, sekund).

time = opdatering (time);
minut = opdatering (minut);
anden = opdatering (anden);
funktionsopdatering (t) {
hvis (t <10) {
returner "0" + t;
}
andet {
returnere t;
}
}

Tilføjelse af tidselementer til DOM

For det første er der adgang til DOM ved hjælp af måldivens id (digitalt ur). Derefter tildeles tidselementerne til div ved hjælp af indre tekst setter.

document.getElementById ("digital-ur"). innerText = time + ":" + minut + ":" + sekund + "" + periode;

Opdatering af uret hvert sekund

Uret opdateres hvert sekund ved hjælp af setTimeout () metode i JavaScript.

setTimeout (tid, 1000);

Styling af det digitale ur ved hjælp af CSS

Åbn styles.css fil og indsæt følgende kode:

Relaterede: Sådan bruges CSS box-shadow: Tricks og eksempler

/ * Import af Open Sans Condensed Google-skrifttype * /
@import url (' https://fonts.googleapis.com/css2?family=Open+Sans+Condensed: wght @ 300 & display = swap ');
# digitalt ur {
baggrundsfarve: # 66ffff;
bredde: 35%;
margen: auto;
polstring-top: 50px;
polstring-bund: 50 px;
font-family: 'Open Sans Condensed', sans-serif;
skriftstørrelse: 64 px;
tekstjustering: center;
box-shadow: 0 4px 8px 0 rgba (0, 0, 0, 0,2), 0 6px 20px 0 rgba (0, 0, 0, 0,19);
}

Ovenstående CSS bruges til at style det digitale ur. Her bruges Open Sans Condensed-skrifttypen til at vise urets tekst. Det importeres fra Google-skrifttyper ved hjælp af @importere. Det # digitalt ur id-vælger bruges til at vælge mål-div. Id-vælgeren bruger id attribut for et HTML-element for at vælge et bestemt element.

Relaterede: Simple CSS-kodeeksempler, du kan lære på 10 minutter

Hvis du vil se på den komplette kildekode, der bruges i denne artikel, er her GitHub-arkiv. Hvis du også vil se på den live version af dette projekt, kan du tjekke det igennem GitHub-sider.

Bemærk: Koden anvendt i denne artikel er MIT licenseret.

Udvikle andre JavaScript-projekter

Hvis du er nybegynder hos JavaScript og vil være en god webudvikler, skal du oprette nogle gode JavaScript-baserede projekter. De kan tilføje værdi til dit CV såvel som din karriere.

Du kan prøve nogle projekter som Calculator, et Hangman-spil, Tic Tac Toe, en JavaScript-vejr-app, en interaktiv destinationsside, et Weight Conversion Tool, Rock Paper Scissers osv.

Hvis du leder efter dit næste JavaScript-baserede projekt, er en simpel lommeregner et glimrende valg.

Sådan oprettes en simpel lommeregner ved hjælp af HTML, CSS og JavaScript

Enkel, beregnet kode er vejen at gå, når du programmerer. Tjek, hvordan du bygger din egen lommeregner i HTML, CSS og JS.

Læs Næste

Om forfatteren