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.

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 wird der Stammordner benannt Digitaluhr. Gemäß der Standardnamenskonvention werden die HTML-, CSS- und JavaScript-Dateien benannt index.html, stile.css, und script.js beziehungsweise.

Hinzufügen von Struktur zur Digitaluhr mit HTML

Öffne das index.html Datei und fügen Sie den folgenden Code ein:

Hier ein div wird erstellt mit an Ich würde von Digitaluhr. Dieses div wird verwendet, um die Digitaluhr mit JavaScript anzuzeigen. stile.css ist eine externe CSS-Seite und wird mit a. auf die HTML-Seite verlinkt Etikett. Ähnlich, script.js ist eine externe JS-Seite und wird mit der HTML-Seite über das <Skript> Etikett.

Hinzufügen von Funktionen zur Digitaluhr mit JavaScript

Öffne das script.js Datei und fügen Sie den folgenden Code ein:

Funktion Zeit() {
// Objekt der Date-Klasse erstellen
var Datum = neues Datum ();
// Aktuelle Stunde abrufen
var Stunde = date.getHours();
// Aktuelle Minute abrufen
var minute = date.getMinutes();
// Aktuelle Sekunde abrufen
var Sekunde = date.getSeconds();
// Variable zum Speichern von AM / PM
var-Periode = "";
// Zuweisung von AM / PM entsprechend der aktuellen Stunde
if (Stunde >= 12) {
Periode = "PM";
} sonst {
Periode = "AM";
}
// Umrechnung der Stunde in das 12-Stunden-Format
if (Stunde == 0) {
Stunde = 12;
} sonst {
wenn (Stunde > 12) {
Stunde = Stunde - 12;
}
}
// Aktualisieren von Stunde, Minute und Sekunde
// wenn sie kleiner als 10. sind
Stunde = Aktualisierung (Stunde);
Minute = Aktualisierung (Minute);
zweite = aktualisieren (zweite);
// Hinzufügen von Zeitelementen zum div
document.getElementById("digital-clock").innerText = Stunde + ": " + Minute + ": " + Sekunde + " " + Periode;
// Timer auf 1 Sek. (1000 ms) setzen
setTimeout (Zeit, 1000);
}
// Funktion zum Aktualisieren von Zeitelementen, wenn sie kleiner als 10. sind
// 0 vor Zeitelementen anhängen, wenn sie kleiner als 10. sind
Funktionsupdate (t) {
wenn (t < 10) {
Rückgabe "0" + t;
}
sonst {
Rückkehr t;
}
}
Zeit();

Den JavaScript-Code verstehen

Das Zeit() und aktualisieren() Funktionen werden verwendet, um der Digitaluhr Funktionen 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 Datum = neues Datum ();

Das aktuelle Datum und die Uhrzeit werden im Datum Variable. 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 und Sekunde aus dem Datumsobjekt abzurufen. Alle Zeitelemente werden in separaten Variablen für weitere Operationen gespeichert.

var Stunde = date.getHours();
var minute = date.getMinutes();
var Sekunde = 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-Periode = "";
if (Stunde >= 12) {
Periode = "PM";
} sonst {
Periode = "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.

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

if (Stunde == 0) {
Stunde = 12;
} sonst {
wenn (Stunde > 12) {
Stunde = Stunde - 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.

Stunde = Aktualisierung (Stunde);
Minute = Aktualisierung (Minute);
zweite = aktualisieren (zweite);
Funktionsupdate (t) {
wenn (t < 10) {
Rückgabe "0" + t;
}
sonst {
Rückkehr t;
}
}

Hinzufügen der Zeitelemente zum DOM

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

document.getElementById("digital-clock").innerText = Stunde + ": " + Minute + ": " + Sekunde + " " + Periode;

Aktualisieren der Uhr jede Sekunde

Die Uhr wird jede Sekunde mit dem setTimeout() -Methode in JavaScript.

setTimeout (Zeit, 1000);

Die Digitaluhr mit CSS gestalten

Öffne das stile.css Datei und fügen Sie den folgenden Code ein:

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

/* Open Sans Condensed Google Font importieren */
@import-URL(' https://fonts.googleapis.com/css2?family=Open+Sans+Condensed: wght@300&display=swap');
#Digitaluhr {
Hintergrundfarbe: #66ffff;
Breite: 35%;
Rand: automatisch;
Polsterung-Oberseite: 50px;
Polsterung unten: 50px;
Schriftfamilie: 'Open Sans Condensed', serifenlos;
Schriftgröße: 64px;
Textausrichtung: Mitte;
Box-Schatten: 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 aus Google-Schriften importiert mit @importieren. Das #Digitaluhr ID-Selektor wird verwendet, um das Ziel-Div auszuwählen. Die ID-Auswahl verwendet die Ich würde Attribut eines HTML-Elements, um ein bestimmtes Element auszuwählen.

Verbunden: 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, hier ist der GitHub-Repository. Wenn Sie sich auch die Live-Version dieses Projekts ansehen möchten, können Sie es sich ansehen GitHub-Seiten.

Hinweis: Der in diesem Artikel verwendete Code ist 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.

So erstellen Sie einen einfachen Rechner mit HTML, CSS und JavaScript

Einfacher, berechneter Code ist der richtige Weg beim Programmieren. Sehen Sie sich an, wie Sie Ihren eigenen Taschenrechner in HTML, CSS und JS erstellen.

Weiter lesen

Über den Autor