So erstellen Sie eine Digitaluhr mit HTML, CSS und JavaScript

Die Digitaluhr gehört zu den besten Einsteigerprojekten in JavaScript. Es ist ziemlich einfach für Leute jeden Kenntnisstandes zu lernen.

In diesem Artikel erfahren Sie, wie Sie mit HTML, CSS und JavaScript eine eigene digitale Uhr erstellen. Sie erhalten praktische Erfahrung mit verschiedenen JavaScript-Konzepten wie dem Erstellen von Variablen, Verwenden von Funktionen, Arbeiten mit Datumsangaben, Zugreifen auf und Hinzufügen von Eigenschaften zu DOM und mehr.

Lass uns anfangen.

Komponenten der Digitaluhr

Die Digitaluhr besteht aus vier Teilen: Stunde, Minute, Sekunde und Meridiem.

So erstellen Sie eine Digitaluhr mit HTML, CSS und JavaScript - Components of Digital Clock

Ordnerstruktur des Digitaluhr-Projekts

Erstellen Sie einen Stammordner, der die HTML-, CSS- und JavaScript-Dateien enthält. Sie können die Dateien beliebig benennen. Hier heißt der Stammordner Digital-Clock . Gemäß der Standardnamenskonvention heißen die HTML-, CSS- und JavaScript-Dateien index.html , style.css bzw. script.js .

So erstellen Sie eine Digitaluhr mit HTML, CSS und JavaScript - Digital Clock Folder Structure

Hinzufügen von Struktur zur Digitaluhr mit HTML

Öffnen Sie die Datei index.html und fügen Sie den folgenden Code ein:

 <!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title> Digital Clock Using JavaScript </title>
<link rel = "stylesheet" href = "styles.css">
</head>
<body>
<div id = "digital-clock"> </div>
<script src = "script.js"> </script>
</body>
</html>

Hier wird ein div mit einer ID von digital-clock erstellt . Dieses div wird verwendet, um die Digitaluhr mit JavaScript anzuzeigen. style.css ist eine externe CSS-Seite und wird über ein <link> -Tag mit der HTML-Seite verknüpft . Ebenso ist script.js eine externe JS-Seite und wird mit dem < script> -Tag mit der HTML-Seite verknüpft.

Hinzufügen von Funktionen zur Digitaluhr mit JavaScript

Öffnen Sie die Datei script.js und fügen Sie den folgenden Code ein:

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

Den JavaScript-Code verstehen

Die Funktionen Time() und update() werden verwendet, um der Digitaluhr Funktionalität hinzuzufügen.

Abrufen der aktuellen Zeitelemente

Um das aktuelle Datum und die aktuelle Uhrzeit abzurufen, müssen Sie ein Date-Objekt erstellen. Dies ist die Syntax zum Erstellen eines Date-Objekts in JavaScript:

 var date = new Date();

Das aktuelle Datum und die aktuelle Uhrzeit werden in der Datumsvariablen gespeichert. Jetzt müssen Sie die aktuelle Stunde, Minute und Sekunde aus dem Datumsobjekt extrahieren.

date.getHours() , date.getMinutes() und date.getSeconds() werden verwendet, um die aktuelle Stunde, Minute bzw. Sekunde aus dem Datumsobjekt abzurufen . Alle Zeitelemente werden in separaten Variablen für weitere Operationen gespeichert.

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

Zuweisen des aktuellen Meridiems (AM/PM)

Da die Digitaluhr im 12-Stunden-Format vorliegt, müssen Sie der aktuellen Stunde den entsprechenden Meridiem zuweisen. Wenn die aktuelle Stunde größer oder gleich 12 ist, ist das Meridiem PM (Post Meridiem), ansonsten AM (Ante Meridiem).

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

Konvertieren der aktuellen Stunde in das 12-Stunden-Format

Jetzt müssen Sie die aktuelle Stunde in ein 12-Stunden-Format umwandeln. Wenn die aktuelle Stunde 0 ist, wird die aktuelle Stunde auf 12 aktualisiert (entsprechend dem 12-Stunden-Format). Wenn die aktuelle Stunde größer als 12 ist, wird sie außerdem um 12 reduziert, um sie an das 12-Stunden-Zeitformat anzupassen.

Verwandte: So deaktivieren Sie Textauswahl, Ausschneiden, Kopieren, Einfügen und Rechtsklick auf eine Webseite

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

Aktualisieren der Zeitelemente

Sie müssen die Zeitelemente aktualisieren, wenn sie kleiner als 10 (einstellig) sind. An alle einstelligen Zeitelemente (Stunde, Minute, Sekunde) wird eine 0 angehängt.

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

Hinzufügen der Zeitelemente zum DOM

Zuerst wird auf das DOM unter Verwendung der ID des Ziel-Divs ( digital-clock ) zugegriffen. Dann werden die Zeitelemente dem div mit dem innerText- Setter zugewiesen .

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

Aktualisieren der Uhr jede Sekunde

Die Uhr wird jede Sekunde mit der Methode setTimeout() in JavaScript aktualisiert.

 setTimeout(Time, 1000);

Die Digitaluhr mit CSS gestalten

Öffnen Sie die Datei style.css und fügen Sie den folgenden Code ein:

Verwandte: So verwenden Sie CSS box-shadow: Tricks und Beispiele

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

Das obige CSS wird verwendet, um die Digitaluhr zu stylen. Hier wird die Schriftart Open Sans Condensed verwendet, um den Text der Uhr anzuzeigen. Es wird mit @import aus Google-Schriftarten importiert . Der Selektor #digital-clock id wird verwendet, um das Ziel-Div auszuwählen. Der id-Selektor verwendet das id- Attribut eines HTML-Elements, um ein bestimmtes Element auszuwählen.

Verwandte: Einfache CSS-Codebeispiele, die Sie in 10 Minuten lernen können

Wenn Sie sich den vollständigen Quellcode, der in diesem Artikel verwendet wird, ansehen möchten, finden Sie hier das GitHub-Repository . Wenn Sie sich die Live-Version dieses Projekts ansehen möchten, können Sie es sich über GitHub Pages ansehen.

Hinweis : Der in diesem Artikel verwendete Code ist vom MIT lizenziert .

Andere JavaScript-Projekte entwickeln

Wenn Sie ein Anfänger in JavaScript sind und ein guter Webentwickler werden möchten, müssen Sie einige gute JavaScript-basierte Projekte erstellen. Sie können sowohl Ihrem Lebenslauf als auch Ihrer Karriere einen Mehrwert verleihen.

Sie können einige Projekte wie den Taschenrechner, ein Hangman-Spiel, Tic Tac Toe, eine JavaScript-Wetter-App, eine interaktive Landingpage, ein Gewichtskonvertierungstool, eine Steinpapierschere usw. ausprobieren.

Wenn Sie nach Ihrem nächsten JavaScript-basierten Projekt suchen, ist ein einfacher Taschenrechner eine ausgezeichnete Wahl.