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

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

Det digitale ur er blandt de bedste nybegynderprojekter i JavaScript. Det er ret let at lære for folk på et hvilket som helst 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 ejendomme til DOM og mere.



lyt til musik med venner online

Lad os komme igang.





Komponenter i det digitale ur

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

Mappestruktur i det digitale urprojekt

Opret en rodmappe, der indeholder HTML-, CSS- og JavaScript -filerne. Du kan navngive filerne hvad du vil. Her hedder rodmappen Digitalt ur . I henhold til standard navngivningskonventionen navngives HTML-, CSS- og JavaScript -filerne index.html , styles.css , og 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:





Digital Clock Using JavaScript






Her, a div er skabt 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 knyttet til HTML -siden ved hjælp af en tag. Tilsvarende script.js er en ekstern JS -side og er knyttet 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:

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å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 klokkeslæt skal du oprette et datoobjekt. Dette er syntaksen til oprettelse af et datoobjekt i JavaScript:

var date = new Date();

Den aktuelle dato og klokkeslæt 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 henholdsvis den aktuelle time, minut og sekund fra datoobjektet. Alle tidselementer lagres i separate variabler til yderligere operationer.

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

Tildeling af den aktuelle middag (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, så er meridiemet PM (Post Meridiem) ellers er det AM (Ante Meridiem).

var period = '';
if (hour >= 12) {
period = 'PM';
} else {
period = '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 med 12 for at holde den tilpasset 12-timers tidsformatet.

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

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

Opdatering af tidselementerne

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

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

Tilføjelse af tidselementerne til DOM

Først får du adgang til DOM ved hjælp af target div's id ( digitalt ur ). Derefter tildeles tidselementerne div ved hjælp af indre tekst setter.

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

Opdatering af uret hvert sekund

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

setTimeout(Time, 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

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

Ovenstående CSS bruges til at style det digitale ur. Her bruges Open Sans Condensed -skrifttypen til at vise urets tekst. Det er importeret 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 specifikt element.

Relaterede: Enkle 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 -depot . Hvis du også vil se på liveversionen af ​​dette projekt, kan du tjekke det igennem GitHub -sider .

Bemærk : Koden, der bruges i denne artikel, er MIT licenseret .

Udvikl andre JavaScript -projekter

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

Du kan prøve nogle projekter som Lommeregner, et Hangman -spil, Tic Tac Toe, en JavaScript -vejr -app, en interaktiv landingsside, et vægtkonverteringsværktøj, en klippepapir osv.

hvordan man sletter backup af tidsmaskiner

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

Del Del Tweet E -mail Sådan opbygges en simpel lommeregner ved hjælp af HTML, CSS og JavaScript

Enkel, beregnet kode er vejen frem, når man programmerer. Se, hvordan du bygger din egen lommeregner i HTML, CSS og JS.

Læs Næste Relaterede emner Om forfatteren Yuvraj Chandra(60 artikler udgivet)

Yuvraj er en datalogi bachelorstuderende ved University of Delhi, Indien. Han brænder for Full Stack Web Development. Når han ikke skriver, undersøger han dybden af ​​forskellige teknologier.

Mere fra Yuvraj Chandra

Abonner på vores nyhedsbrev

Tilmeld dig vores nyhedsbrev for at få tekniske tips, anmeldelser, gratis e -bøger og eksklusive tilbud!

Klik her for at abonnere