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

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 digital klokke med HTML, CSS og JavaScript. Du får praktisk erfaring med ulike JavaScript-konsepter som å lage variabler, bruke funksjoner, jobbe med datoer, få tilgang til og legge til eiendommer til DOM og mer.



hvordan fortelle hvilket hovedkort jeg har

La oss komme i gang.





Komponenter i den digitale klokken

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

Mappestruktur i Digital Clock Project

Lag 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 navnekonvensjon får HTML-, CSS- og JavaScript -filene navn index.html , styles.css , og script.js henholdsvis.



Legge til struktur i den digitale klokken ved hjelp av HTML

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





Digital Clock Using JavaScript






Her en div er laget 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 en 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:

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

Forstå JavaScript -koden

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



Få de nåværende tidselementene

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

var date = new Date();

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

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

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

Tilordne gjeldende middag (AM/PM)

Siden den digitale klokken er i et 12-timers format, må du tilordne passende 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 period = '';
if (hour >= 12) {
period = 'PM';
} else {
period = 'AM';
}

Konvertering av gjeldende time i 12-timers format

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

I slekt: Slik deaktiverer du tekstvalg, klippe, kopiere, lime inn og høyreklikke på en webside

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

Oppdatering av tidselementene

Du må oppdatere tidselementene hvis de er mindre enn 10 (encifret). 0 legges til alle enkeltsifrede tidselementer (time, minutt, sekund).

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

Legge til tidselementene i DOM

Først får du tilgang til DOM ved hjelp av mål div -ID ( digital klokke ). Deretter tildeles tidselementene div ved hjelp av innerText setter.

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

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: Slik bruker du CSS box-shadow: Triks og eksempler

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

Ovennevnte CSS brukes til å style den digitale klokken. Her brukes Open Sans Condensed -skriften for å vise klokkens tekst. Den er importert fra Google -fonter ved hjelp av @import . De #digital klokke ID -velgeren brukes til å velge mål div. ID -velgeren bruker id attributt for 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, her er GitHub -depot . Hvis du også vil se på liveversjonen av dette prosjektet, kan du 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 CV -en din så vel som karrieren din.

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, en papirsaks, etc.

hvordan finne ut hvem et telefonnummer tilhører

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

Dele Dele kvitring E -post Hvordan bygge en enkel kalkulator ved hjelp av HTML, CSS og JavaScript

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

Les neste Relaterte temaer Om forfatteren Yuvraj Chandra(60 artikler publisert)

Yuvraj er en informatikkstudent ved University of Delhi, India. Han brenner for Full Stack webutvikling. Når han ikke skriver, utforsker han dybden i forskjellige teknologier.

Mer fra Yuvraj Chandra

Abonner på vårt nyhetsbrev

Bli med i vårt nyhetsbrev for tekniske tips, anmeldelser, gratis ebøker og eksklusive tilbud!

Klikk her for å abonnere