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.

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 elke 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:

Hier een div is gemaakt met een ID kaart van digitale klok. Deze div wordt gebruikt om de digitale klok weer te geven met behulp van 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:

functie Tijd() {
// Object van de klasse Date maken
var datum = nieuwe datum();
// Haal het huidige uur op
var uur = datum.getHours();
// Haal de huidige minuut op
var minuut = datum.getMinutes();
// Haal de huidige seconde op
var tweede = datum.getSeconds();
// Variabele om AM / PM op te slaan
var periode = "";
// AM / PM toewijzen volgens het huidige uur
als (uur >= 12) {
periode = "PM";
} anders {
periode = "AM";
}
// Het uur converteren in 12-uurs formaat
als (uur == 0) {
uur = 12;
} anders {
als (uur > 12) {
uur = uur - 12;
}
}
// Uur, minuut en seconde bijwerken
// als ze kleiner zijn dan 10
uur = update (uur);
minuut = update (minuut);
tweede = update (tweede);
// Tijdselementen toevoegen aan de div
document.getElementById("digital-clock").innerText = uur + ": " + minuut + ": " + seconde + " " + periode;
// Timer instellen op 1 sec (1000 ms)
setTimeout (Tijd, 1000);
}
// Functie om tijdelementen bij te werken als ze kleiner zijn dan 10
// Voeg 0 toe voor tijdselementen als ze kleiner zijn dan 10
functie-update (t) {
als (t < 10) {
retourneer "0" + t;
}
anders {
terug t;
}
}
Tijd();

De JavaScript-code begrijpen

De Tijd() en bijwerken() 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 datum = nieuwe datum();

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 uur = datum.getHours();
var minuut = datum.getMinutes();
var tweede = datum.getSeconds();

De huidige meridiem 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 periode = "";
als (uur >= 12) {
periode = "PM";
} anders {
periode = "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 met 12 verminderd om het in lijn te houden met het 12-uurs tijdformaat.

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

als (uur == 0) {
uur = 12;
} anders {
als (uur > 12) {
uur = uur - 12;
}
}

De tijdelementen bijwerken

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

uur = update (uur);
minuut = update (minuut);
tweede = update (tweede);
functie-update (t) {
als (t < 10) {
retourneer "0" + t;
}
anders {
terug 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 = uur + ": " + minuut + ": " + seconde + " " + periode;

De klok elke seconde bijwerken

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

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

/* Open Sans Condensed Google-lettertype importeren */
@import-url(' https://fonts.googleapis.com/css2?family=Open+Sans+Condensed: wght@300&display=swap');
#digitale klok {
achtergrondkleur: #66ffff;
breedte: 35%;
marge: automatisch;
opvulling-top: 50px;
opvulling-bodem: 50px;
font-familie: 'Open Sans Condensed', schreefloos;
lettergrootte: 64px;
tekst uitlijnen: midden;
box-schaduw: 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, Steenpapierschaar, enz.

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

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

Over de auteur