So bauen Sie eine Digitaluhr mit JavaScript

Blog

In diesem Beitrag erfahren Sie, wie Sie mit JavaScript eine Digitaluhr im 24-Stunden- und 12-Stunden-Format erstellen.



In dem 24 Stunden Format wird die Zeit in Form von . angezeigt HH : MM : SS . In dem 12 Stunden Format, es wird in Form von . angezeigt HH : MM : SS AM/PM .

vs Code Live-Server

Digitaluhr im 24-Stunden-Format

Siehe die Stift-Digitaluhr auf CodePen



Beginnen wir mit dem HTML.

Die Struktur

Erstellen Sie zunächst a div mit id Uhr in dem Sie die Uhrzeit anzeigen möchten. Wir werden die Zeit in diese einfügen div unter Verwendung von JavaScript.



HTML

Das Styling

Das Styling für den anzuzeigenden Text im div ist im CSS definiert.

Der Text erhält eine Schriftgröße und -farbe. Seine Schriftfamilie wurde als _Orbitron_ gewählt, weil sie das Aussehen einer echten Digitaluhr verleiht. Der Textkörper erhält eine dunkle Hintergrundfarbe und der Text wird mittig ausgerichtet.

CSS

/* Google font */ @import url('https://fonts.googleapis.com/css?family=Orbitron'); body { background-color: #121212; } #clock { font-family: 'Orbitron', sans-serif; color: #66ff99; font-size: 56px; text-align: center; padding-top: 40px; padding-bottom: 40px; }

Das Verschlüsseln

Hier kommt nun der Hauptteil. Der gesamte Code für das Funktionieren der Uhr ist in der aktuelle Uhrzeit() Funktion.

Innerhalb dieser Funktion ist ein Objekt der Datum Es wird eine Klasse erstellt, mit der Sie Jahr, Datum, Stunde, Minute, Sekunde und Millisekunde aufrufen können.

In unserem Code wird dieses Objekt verwendet, um die aktuellen Stunden, Minuten und Sekunden abzurufen, die in verschiedenen Variablen gespeichert sind.

Reagieren Hooks Best Practices

JS

function currentTime() { var date = new Date(); /* creating object of Date class */ var hour = date.getHours(); var min = date.getMinutes(); var sec = date.getSeconds(); }

Die erhaltenen Stunden, Minuten und Sekunden werden einstellig angezeigt, wenn sie kleiner als 10 sind. Zum Beispiel wird die aktuelle Stunde als . angezeigt 7 Anstatt von 07 . Um die Zeitelemente immer zweistellig anzuzeigen, a 0 wird vor ihnen angehängt, wenn sie weniger als 10 Jahre alt sind Updatezeit() Methode.

JS

Yann Lecun Deep-Learning-Kurs
function currentTime() { hour = updateTime(hour); min = updateTime(min); sec = updateTime(sec); } function updateTime(k) { if (k <10) { return '0' + k; } else { return k; } }

Sobald unsere Zeit fertig ist, zeigen wir sie im div die wir vorher gemacht haben. Dies geschieht durch den Erhalt der div Verwendung der document.getElementById Methode und geben unsere Zeit als Inhalt der div Verwendung der innerHTML Eigentum.

JS

document.getElementById('clock').innerHTML = hour + ' : ' + min + ' : ' + sec; /* adding time to the div */

Um den Timer zu starten, setTimeout() Es wird eine Methode verwendet, die die Funktion übernimmt aktuelle Uhrzeit() als erstes Argument und die Zeit (in Millisekunden), nach der Sie die Funktion als zweites Argument aufrufen möchten. In unserem Fall wird die Funktion alle 1000 Millisekunden aufgerufen.

Endlich, das aktuelle Uhrzeit() Die Funktion wird aufgerufen, um den gesamten Prozess zu initiieren.

JS

function currentTime() { var t = setTimeout(function(){ currentTime() }, 1000); /* setting timer */ } currentTime(); /* calling currentTime() function to initiate the process */

Herzlichen Glückwunsch, Sie haben gerade eine Digitaluhr erstellt.

# Digitaluhr im 12-Stunden-Format

Siehe die Stift-Digitaluhr auf CodePen:

HTML und CSS für das 12-Stunden-Format bleiben dieselben wie im vorherigen Fall.

Die Struktur

Ein ... kreieren div um die Zeit wie für die vorherige Uhr anzuzeigen.

HTML

Das Styling

Gestalten Sie die Uhr auf die gleiche Weise wie bei der vorherigen Uhr.

CSS

So loggen Sie sich mit cashtag in die Cash-App ein
/* Google font */ @import url('https://fonts.googleapis.com/css?family=Orbitron'); body { background-color: #121212; } #clock { font-family: 'Orbitron', sans-serif; color: #66ff99; font-size: 56px; text-align: center; padding-top: 40px; padding-bottom: 40px; }

Das Verschlüsseln

Der JavaScript-Code enthält einige zusätzliche Zeilen zusätzlich zum Code, der für die vorherige Uhr erstellt wurde. Der Code für die Digitaluhr im 24-Stunden-Format ist unten dargestellt.

JS

function currentTime() { var date = new Date(); /* creating object of Date class */ var hour = date.getHours(); var min = date.getMinutes(); var sec = date.getSeconds(); hour = updateTime(hour); min = updateTime(min); sec = updateTime(sec); document.getElementById('clock').innerText = hour + ' : ' + min + ' : ' + sec; /* adding time to the div */ var t = setTimeout(function(){ currentTime() }, 1000); /* setting timer */ } function updateTime(k) { if (k <10) { return '0' + k; } else { return k; } } currentTime(); /* calling currentTime() function to initiate the process */

Jetzt müssen wir nur noch drei weitere Codezeilen hinzufügen und unsere Uhr ist bereit.

Eine Variable namens Mittag erstellt und ein Anfangswert von BIN ist ihm zugeordnet. Diese Variable wird verwendet, um zu speichern BIN oder Uhr .

Außerdem wird ein ternärer Operator verwendet, um den Wert anzugeben Uhr in die Variable _mittags_wenn die Stundenzahl größer oder gleich 12 ist und BIN Andernfalls.

JS

sichere Galaxie-Kryptoadresse
function currentTime() { var midday = 'AM'; midday = (hour >= 12) ? 'PM' : 'AM'; }

Um die Zeit im 12-Stunden-Format anzuzeigen, sollte die Stundenanzahl nicht größer als 12 sein. Daher wird 12 von der Stundenanzahl abgezogen, wenn sie größer als 12 ist.

Auch das 24-Stunden-Format von 00: 01: 23 um Mitternacht sollte angezeigt werden als 12 : 01 : 23 UHR im 12-Stunden-Format. Dazu die Anzahl der Stunden 00 wird ersetzt durch 12 .

JS

function currentTime() { hour = (hour == 0) ? 12 : ((hour > 12) ? (hour - 12): hour); }

#javascript #webdev

www.youtube.com

So bauen Sie eine Digitaluhr mit JavaScript

In diesem JavaScript erfahren Sie, wie Sie mit JavaScript eine Digitaluhr im 24-Stunden- und 12-Stunden-Format erstellen.