Een digitale klok maken met HTML, CSS en JavaScript

Een digitale klok maken met HTML, CSS en JavaScript

De digitale klok is een van de beste beginnersprojecten in JavaScript. Het is vrij eenvoudig te leren voor mensen van elk vaardigheidsniveau.





In dit artikel leert u hoe u uw eigen digitale klok kunt bouwen met HTML, CSS en JavaScript. Je krijgt praktische ervaring met verschillende JavaScript-concepten, zoals het maken van variabelen, het gebruik van functies, het werken met datums, het openen en toevoegen van eigenschappen aan DOM en meer.



hoe erachter te komen wie de eigenaar is van een telefoonnummer

Laten we beginnen.





Onderdelen van de digitale klok

De digitale klok heeft vier delen: uur, minuut, seconde en meridiem.

Mapstructuur van het Digital Clock Project

Maak een hoofdmap die de HTML-, CSS- en JavaScript-bestanden bevat. U kunt de bestanden een naam geven die u maar wilt. Hier wordt de hoofdmap genoemd Digitale klok . Volgens de standaard naamgevingsconventie krijgen de HTML-, CSS- en JavaScript-bestanden een naam index.html , stijlen.css , en script.js respectievelijk.



Structuur toevoegen aan de digitale klok met HTML

Open de index.html bestand en plak de volgende code:





Digital Clock Using JavaScript






Hier een div is gemaakt met een ID kaart van digitale klok . Deze div wordt gebruikt om de digitale klok weer te geven met JavaScript. stijlen.css is een externe CSS-pagina en is gekoppeld aan de HTML-pagina met behulp van a label. evenzo, script.js is een externe JS-pagina en is gekoppeld aan de HTML-pagina met behulp van de < script> label.



Functionaliteit toevoegen aan de digitale klok met JavaScript

Open de script.js bestand en plak de volgende code:

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

De JavaScript-code begrijpen

De Tijd() en update() functies worden gebruikt om functionaliteit aan de digitale klok toe te voegen.



De huidige tijdelementen verkrijgen

Om de huidige datum en tijd te krijgen, moet u een Date-object maken. Dit is de syntaxis voor het maken van een Date-object in JavaScript:

var date = new Date();

De huidige datum en tijd worden opgeslagen in de datum variabel. Nu moet u het huidige uur, de minuut en de seconde extraheren uit het datumobject.

datum.getHours() , datum.getMinutes(), en datum.getSeconds () worden gebruikt om respectievelijk het huidige uur, de minuut en de seconde uit het datumobject te halen. Alle tijdselementen worden opgeslagen in afzonderlijke variabelen voor verdere bewerkingen.

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

De huidige middag toewijzen (AM/PM)

Aangezien de digitale klok een 12-uurs formaat heeft, moet u de juiste meridiem toewijzen volgens het huidige uur. Als het huidige uur groter is dan of gelijk is aan 12, dan is de meridiem PM (Post Meridiem), anders is het AM (Ante Meridiem).

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

Het huidige uur converteren in 12-uurs formaat

Nu moet u het huidige uur converteren naar een 12-uurs formaat. Als het huidige uur 0 is, wordt het huidige uur bijgewerkt naar 12 (volgens het 12-uursformaat). Als het huidige uur groter is dan 12, wordt het verminderd met 12 om het in lijn te houden met het 12-uurs tijdformaat.

Verwant: Tekst selecteren, knippen, kopiëren, plakken en rechtsklikken op een webpagina uitschakelen

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

De tijdelementen bijwerken

U moet de tijdelementen bijwerken als ze kleiner zijn dan 10 (eencijferig). 0 wordt toegevoegd aan alle eencijferige tijdelementen (uur, minuut, seconde).

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

De tijdelementen toevoegen aan de DOM

Eerst wordt de DOM geopend met behulp van de id van de doel-div ( digitale klok ). Vervolgens worden de tijdselementen toegewezen aan de div met behulp van de innerText setter.

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

De klok elke seconde bijwerken

De klok wordt elke seconde bijgewerkt met behulp van de setTimeout() methode in JavaScript.

setTimeout(Time, 1000);

De digitale klok stylen met CSS

Open de stijlen.css bestand en plak de volgende code:

Verwant: Hoe CSS box-shadow te gebruiken: trucs en voorbeelden

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

De bovenstaande CSS wordt gebruikt om de digitale klok op te maken. Hier wordt het lettertype Open Sans Condensed gebruikt om de tekst van de klok weer te geven. Het is geïmporteerd uit Google-lettertypen met behulp van @importeren . De #digitale klok id selector wordt gebruikt om de doel-div te selecteren. De id selector gebruikt de ID kaart attribuut van een HTML-element om een ​​specifiek element te selecteren.

Verwant: Eenvoudige CSS-codevoorbeelden die u in 10 minuten kunt leren

Als je de volledige broncode wilt bekijken die in dit artikel wordt gebruikt, is hier de: GitHub-opslagplaats . Als je de live-versie van dit project wilt bekijken, kun je het ook bekijken via GitHub-pagina's .

Opmerking : De code die in dit artikel wordt gebruikt is MIT-licentie .

Andere JavaScript-projecten ontwikkelen

Als je een beginner bent in JavaScript en een goede webontwikkelaar wilt worden, moet je een aantal goede op JavaScript gebaseerde projecten bouwen. Ze kunnen zowel waarde toevoegen aan je cv als aan je carrière.

Je kunt een aantal projecten uitproberen, zoals Calculator, een Galgje-spel, Tic Tac Toe, een JavaScript-weer-app, een interactieve bestemmingspagina, een Gewichtsconversietool, Rock Paper Scissors, enz.

hoe linux te verwijderen uit dual boot

Als u op zoek bent naar uw volgende op JavaScript gebaseerde project, is een eenvoudige rekenmachine een uitstekende keuze.

Deel Deel Tweeten E-mail Een eenvoudige rekenmachine bouwen met HTML, CSS en JavaScript

Eenvoudige, berekende code is de beste keuze bij het programmeren. Bekijk hoe u uw eigen rekenmachine bouwt in HTML, CSS en JS.

Lees volgende Gerelateerde onderwerpen Over de auteur Yuvraj Chandra(60 artikelen gepubliceerd)

Yuvraj is een student Computerwetenschappen aan de Universiteit van Delhi, India. Hij is gepassioneerd door Full Stack Web Development. Als hij niet aan het schrijven is, onderzoekt hij de diepte van verschillende technologieën.

Meer van Yuvraj Chandra

Abonneer op onze nieuwsbrief

Word lid van onze nieuwsbrief voor technische tips, recensies, gratis e-boeken en exclusieve deals!

Klik hier om je te abonneren