Hvordan lage en digital klokke ved hjelp av HTML, CSS og JavaScript

Digital Clock er blant de beste nybegynnerprosjektene i JavaScript. Det er ganske enkelt å lære for folk på alle ferdighetsnivåer.

I denne artikkelen lærer du hvordan du bygger en egen digital klokke ved hjelp av HTML, CSS og JavaScript. Du får praktisk erfaring med forskjellige JavaScript-konsepter, som å lage variabler, bruke funksjoner, jobbe med datoer, få tilgang til og legge til egenskaper i DOM og mer.

La oss komme i gang.

Komponenter i den digitale klokken

Den digitale klokken har fire deler: time, minutt, sekund og meridiem.

Mappestruktur for Digital Clock Project

Opprett en rotmappe som inneholder HTML-, CSS- og JavaScript-filene. Du kan navngi filene hva du vil. Her heter rotmappen Digital klokke. I henhold til standard navngivningskonvensjon er HTML-, CSS- og JavaScript-filene navngitt index.html, styles.css, og script.js henholdsvis.

Legge til struktur til den digitale klokken ved hjelp av HTML

Åpne index.html fil og lim inn følgende kode:

Her en div er opprettet med en id av digital klokke. Denne div brukes til å vise den digitale klokken ved hjelp av JavaScript. styles.css er en ekstern CSS-side og er koblet til HTML-siden ved hjelp av a stikkord. På samme måte, script.js er en ekstern JS-side og er koblet til HTML-siden ved hjelp av <skript> stikkord.

Legge til funksjonalitet til den digitale klokken ved hjelp av JavaScript

Åpne script.js fil og lim inn følgende kode:

funksjonstid () {
// Opprette objekt fra klassen Date
var date = new Date ();
// Få aktuell time
var time = date.getHours ();
// Få nåværende minutt
var minutt = date.getMinutes ();
// Få nåværende sekund
var andre = date.getSeconds ();
// Variabel for å lagre AM / PM
var periode = "";
// Tilordne AM / PM i henhold til gjeldende time
hvis (time> = 12) {
periode = "PM";
} annet {
periode = "AM";
}
// Konvertering av timen i 12-timers format
hvis (time == 0) {
time = 12;
} annet {
hvis (time> 12) {
time = time - 12;
}
}
// Oppdaterer time, minutt og sekund
// hvis de er under 10
time = oppdatering (time);
minutt = oppdatering (minutt);
andre = oppdatering (andre);
// Legge til tidselementer til div
document.getElementById ("digital-klokke"). innerText = time + ":" + minutt + ":" + sekund + "" + periode;
// Still timeren til 1 sek (1000 ms)
setTimeout (Time, 1000);
}
// Funksjon for å oppdatere tidselementer hvis de er mindre enn 10
// Legg til 0 før tidselementer hvis de er mindre enn 10
funksjonsoppdatering (t) {
hvis (t <10) {
returner "0" + t;
}
annet {
returnere t;
}
}
Tid();

Forstå JavaScript-koden

De Tid() og Oppdater() funksjoner brukes til å legge til funksjonalitet til den digitale klokken.

Få de aktuelle tidselementene

For å få gjeldende dato og klokkeslett, må du opprette et datoobjekt. Dette er syntaksen for å lage et Date-objekt i JavaScript:

var date = new Date ();

Gjeldende dato og klokkeslett vil bli lagret i Dato variabel. Nå må du trekke ut gjeldende time, minutt og sekund fra datoobjektet.

date.getHours (), date.getMinutes (), og date.getSeconds () brukes til å hente gjeldende time, minutt og sekund fra datoobjektet. Alle tidselementene er lagret i separate variabler for videre operasjoner.

var time = date.getHours ();
var minutt = date.getMinutes ();
var andre = date.getSeconds ();

Tilordne det nåværende Meridiem (AM / PM)

Siden Digital Clock er i et 12-timers format, må du tilordne riktig meridiem i henhold til gjeldende time. Hvis den nåværende timen er større enn eller lik 12, er meridiemet PM (Post Meridiem) ellers er det AM (Ante Meridiem).

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

Konvertering av gjeldende time i 12-timers format

Nå må du konvertere den aktuelle timen til et 12-timers format. Hvis den aktuelle timen er 0, oppdateres den aktuelle timen til 12 (i henhold til 12-timersformatet). Også, hvis den nåværende timen er større enn 12, reduseres den med 12 for å holde den justert med 12-timers tidsformatet.

I slekt: Slik deaktiverer du tekstvalg, klipper, kopierer, limer inn og høyreklikker på en webside

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

Oppdaterer tidselementene

Du må oppdatere tidselementene hvis de er mindre enn 10 (ensifret). 0 er lagt til alle de ensifrede tidselementene (time, minutt, sekund).

time = oppdatering (time);
minutt = oppdatering (minutt);
andre = oppdatering (andre);
funksjonsoppdatering (t) {
hvis (t <10) {
returner "0" + t;
}
annet {
returnere t;
}
}

Legge til tidselementene i DOM

For det første får du tilgang til DOM ved hjelp av måldivens ID (digital klokke). Deretter tildeles tidselementene til div ved hjelp av indre tekst setter.

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

Oppdaterer klokken hvert sekund

Klokken oppdateres hvert sekund ved hjelp av setTimeout () metode i JavaScript.

setTimeout (Time, 1000);

Styling av den digitale klokken ved hjelp av CSS

Åpne styles.css fil og lim inn følgende kode:

I slekt: Hvordan bruke CSS box-shadow: Triks og eksempler

/ * Importerer Open Sans-kondensert Google-skrift * /
@import url (' https://fonts.googleapis.com/css2?family=Open+Sans+Condensed: wght @ 300 & display = swap ');
#digital klokke {
bakgrunnsfarge: # 66ffff;
bredde: 35%;
margin: auto;
polstring-topp: 50px;
polstring-bunn: 50px;
font-family: 'Open Sans Condensed', sans-serif;
skriftstørrelse: 64 px;
tekstjustering: sentrum;
bokseskygge: 0 4px 8px 0 rgba (0, 0, 0, 0,2), 0 6px 20px 0 rgba (0, 0, 0, 0,19);
}

Ovennevnte CSS brukes til å style den digitale klokken. Her brukes Open Sans Condensed font til å vise klokkens tekst. Den importeres fra Google-skrifter ved hjelp av @import. De #digital klokke ID-velgeren brukes til å velge måldiv. ID-velgeren bruker id attributt til et HTML-element for å velge et bestemt element.

I slekt: Enkle CSS-kodeeksempler du kan lære på 10 minutter

Hvis du vil se på hele kildekoden som brukes i denne artikkelen, er her GitHub-depot. Hvis du vil se på liveversjonen av dette prosjektet, kan du også sjekke det gjennom GitHub-sider.

Merk: Koden som brukes i denne artikkelen er MIT-lisensiert.

Utvikle andre JavaScript-prosjekter

Hvis du er nybegynner på JavaScript og vil være en god webutvikler, må du bygge noen gode JavaScript-baserte prosjekter. De kan tilføre verdi til ditt CV så vel som din karriere.

Du kan prøve ut noen prosjekter som Kalkulator, et Hangman-spill, Tic Tac Toe, en JavaScript-vær-app, en interaktiv destinasjonsside, et vektkonverteringsverktøy, rock paper saks, etc.

Hvis du leter etter ditt neste JavaScript-baserte prosjekt, er en enkel kalkulator et utmerket valg.

Hvordan lage en enkel kalkulator ved hjelp av HTML, CSS og JavaScript

Enkel, beregnet kode er veien å gå når du programmerer. Sjekk ut hvordan du bygger din egen kalkulator i HTML, CSS og JS.

Les Neste

Om forfatteren