So erstellen Sie eine Digitaluhr mit HTML, CSS und JavaScript

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.



So erhöhen Sie den dedizierten Video-RAM ohne Bios

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 bzw.



Hinzufügen von Struktur zur Digitaluhr mit HTML

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





Digital Clock Using JavaScript






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 Schild. Ähnlich, script.js ist eine externe JS-Seite und wird mit der HTML-Seite über das < Skript> Schild.



Hinzufügen von Funktionen zur Digitaluhr mit JavaScript

Öffne das script.js Datei 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 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 date = new Date();

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 hour = date.getHours();
var minute = date.getMinutes();
var second = date.getSeconds();

Zuweisen des aktuellen Mittags (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.

Verwandt: 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 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 = hour + ' : ' + minute + ' : ' + second + ' ' + period;

Aktualisieren der Uhr jede Sekunde

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

setTimeout(Time, 1000);

Die Digitaluhr mit CSS gestalten

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

Verwandt: 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 aus Google-Schriften importiert mit @importieren . Die #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.

Verwandt: 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 .

Notiz : Der in diesem Artikel verwendete Code ist MIT licensed .

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 Taschenrechner, ein Hangman-Spiel, Tic Tac Toe, eine JavaScript-Wetter-App, eine interaktive Landingpage, ein Gewichtskonvertierungstool, eine Steinpapierschere usw. ausprobieren.

Kosten für den Austausch des Galaxy S8-Bildschirms

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

Teilen Teilen Tweet Email 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 Verwandte Themen Über den Autor Yuvraj Chandra(60 veröffentlichte Artikel)

Yuvraj studiert Informatik an der University of Delhi, Indien. Seine Leidenschaft gilt der Full-Stack-Webentwicklung. Wenn er nicht gerade schreibt, erforscht er die Tiefe verschiedener Technologien.

Mehr von Yuvraj Chandra

Abonniere unseren Newsletter

Abonnieren Sie unseren Newsletter für technische Tipps, Rezensionen, kostenlose E-Books und exklusive Angebote!

Klicken Sie hier, um zu abonnieren