Zeigen Sie das aktuelle Datum und die Uhrzeit mit jQuery an
- Holen Sie sich das aktuelle Datum und die aktuelle Uhrzeit mit jQuery
-
Datum-Objekt in JavaScript - Holen Sie sich das aktuelle Datum mit jQuery
- Holen Sie sich die aktuelle Uhrzeit mit jQuery
In diesem Tutorial wird die Anzeige von Datum und Uhrzeit auf unseren Websites erläutert. Wir werden das JavaScript-Date-Objekt eingehend untersuchen.
Unser Hauptaugenmerk wird auf dem Abrufen von Datum und Uhrzeit in verschiedenen Formen mit jQuery liegen.
Holen Sie sich das aktuelle Datum und die aktuelle Uhrzeit mit jQuery
Die Anzeige von Datum und Uhrzeit auf Webseiten ist eine sehr benutzerfreundliche Funktion. Einige Websites informieren ihre Leser über verschiedene Themen, wie z. B. die politische Lage des Landes, oder eine Online-Zeitungswebsite mit Datum, da Zeitungen täglich wechselnde Informationen enthalten.
Das Suchen und Lesen bestimmter Blogs oder Nachrichten ist mit dem angegebenen Datum und der angegebenen Uhrzeit einfach. Heute werden wir darüber sprechen, wie wir unserer Website eine Datums- und Zeitfunktion hinzufügen können.
Datum-Objekt in JavaScript
JavaScript stellt das Date-Objekt bereit, um mit Datums- und Zeitangaben in unseren Anwendungen oder Webseiten zu arbeiten. Das Date-Objekt verfügt über zahlreiche Methoden zum Setzen, Abrufen und Ändern von Datumsangaben.
Das Objekt Datum wird erstellt als:
var date = new Date();
Wenn wir uns die Ausgabe für die Variable date ansehen, sehen wir:
Wie im Bild oben gezeigt, zeigt es das aktuelle Datum, die Uhrzeit und den Wochentag an. Wir können es auch eine Funktion nennen, ohne das Schlüsselwort new zu verwenden, z. B. Date(), die eine Zeichenfolgendarstellung des aktuellen Datums und der aktuellen Uhrzeit zurückgibt.
Wir werden darüber sprechen, wie Sie das Datum und die Uhrzeit mit jQuery einzeln in verschiedenen Formaten erhalten, da der obige Weg das Datum und die Uhrzeit zusammenfasst. Sehen wir uns andere Optionen an, um sie separat zu erhalten.
Holen Sie sich das aktuelle Datum mit jQuery
Wie wir zuvor gesehen haben, gibt new Date() den Tag, das Datum und die Uhrzeit zurück, aber was ist, wenn wir einen Tag oder ein Datum separat anzeigen möchten? Wie machen wir das?
Das Date-Objekt hat unabhängige Methoden zum Abrufen von Tag, Datum, Monat und Jahr. Schauen wir sie uns genauer an.
getDay(): Der Wochentag für das angegebene Datum, gemäss Ortszeit, wird von dieser Methode zurückgeliefert, wobei der Sonntag mit dem Wert 0 bezeichnet wird.getDate(): Von dieser Funktion wird der Monatstag zum angegebenen oder aktuellen Datum gemäss lokaler Zeit zurückgeliefert.getMonth(): Gibt den Monat des angegebenen Datums nach Ortszeit als numerischen Wert zurück, wobei 0 den ersten Monat des Jahres angibt.getFullYear(): Diese Methode gibt das Jahr des angegebenen Datums in lokaler Zeit zurück.
Die Methoden getDay() und getMonth() liefern einen numerischen Wert, aber wir möchten vielleicht den Tag und den Monat mit ihren Namen auf unserer Website anzeigen, also gehen wir tiefer und sehen, wie wir das machen können.
Holen Sie sich den Namen des Tages
Um den Wochentag zu erhalten, haben wir die Methode getDay(), aber sie gibt einen numerischen Wert von 0 bis 6 zurück, wobei 0 für Sonntag steht, 1 für Montag und so weiter. Wir wollen auf unseren Webseiten nicht sagen, dass heute 0 ist.
Wir brauchen den Namen des Tages. Sehen Sie sich den Code unten an, um zu sehen, wie wir dies erreichen können.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
var day_names= ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]
var date = new Date();
$("#currentDay").text("Today is: " + day_names[date.getDay()]);
});
</script>
</head>
<body>
<p id="currentDay"></p>
</body>
</html>
Ausgang:
Der obige Code ist einfach zu verstehen. Wir haben ein Array von Wochentagsnamen erstellt und Sonntag Index 0, Montag Index 1 und so weiter zugewiesen.
Wenn die Funktion getDay() eine Zahl zurückgibt, verwenden wir diese Zahl als Index im Array, um den Wert an diesem Index abzurufen.
Holen Sie sich den Namen des Monats
Die Funktion getMonth() gibt einen Zahlenwert zwischen 0 und 11 aus, wobei 0 für Januar, 1 für Februar usw. steht. Das Date-Objekt enthält keine Funktion zum Abrufen des Monatsnamens, und wir müssen möglicherweise das Datum mit dem Monatsnamen anzeigen.
Wir verwenden dieselbe Methode, mit der wir die Namen der Wochentage bestimmt haben. Untersuchen Sie den folgenden Code.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
var month_names = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ];
var date = new Date();
$("#currentMonth").text("Present Month is: " + month_names[date.getMonth()]);
});
</script>
</head>
<body>
<p id="currentMonth"></p>
</body>
</html>
Ausgang:
Zeigt das Datum im Format (Datum Monat, Jahr) an
Wir haben bereits besprochen, wie Sie den Wochentag oder den Monat nach Namen abrufen können. Schauen wir uns an, wie wir das Datum im Format Datum, Monat und Jahr anzeigen können.
Sie können mit verschiedenen Formen Ihrer Wahl experimentieren, sobald Sie gelernt haben, wie man in einem Format präsentiert.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
var month_names = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ];
var date = new Date();
$("#dateFormat").text(date.getDate() + " " + month_names[date.getMonth()] + ", " + date.getFullYear());
});
</script>
</head>
<body>
<p id="dateFormat"></p>
</body>
</html>
Ausgang:
Holen Sie sich die aktuelle Uhrzeit mit jQuery
Das JavaScript-Objekt Date bietet eine statische Methode, um die aktuelle Uhrzeit zu erhalten. Statische Methoden binden nicht an die Objekte einer Klasse und können unabhängig nur mit einem Klassennamen aufgerufen werden.
Die statische Methode Date.now() gibt den numerischen Wert zurück, der der aktuellen Uhrzeit entspricht.
Date.now()
Ausgang:
Die Zeit wird in Millisekunden zurückgegeben. Dies ist eine nicht sehr lesbare Art der Zeitanzeige auf unseren Webseiten.
Wir möchten die Zeit im Format Stunden:Minuten:Sekunden anzeigen. Lassen Sie uns besprechen, wie wir die Zeit in unserer gewünschten Form erhalten können.
Es kann viele Formate geben, in denen Sie die Uhrzeit auf Ihrer Website anzeigen möchten. Wir werden die beiden primären Formen besprechen, d. h. 24 Stunden und 12 Stunden, und danach werden Sie ein gutes Verständnis dafür bekommen und die Zeit in jedem Format Ihrer Wahl abrufen können.
Im 24-Stunden-Format (Stunden:Minuten:Sekunden)
Das Date-Objekt bietet uns verschiedene Möglichkeiten, die Uhrzeit des angegebenen Datums zu erhalten. Lassen Sie uns jede Methode im Detail untersuchen.
getHours(): Diese Methode gibt die Stunde pro Ortszeit zurück.getMinutes(): Diese Methode gibt die Minuten pro Ortszeit zurück.getSeconds(): Diese Methode gibt die Sekunden pro Ortszeit zurück.
Mit diesen drei Methoden können wir die Uhrzeit ganz einfach in unserem gewünschten Format anzeigen. Überprüfen Sie den folgenden Code, um ein klares Verständnis zu haben.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
var date = new Date();
$("#24HFormat").text(date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds());
});
</script>
</head>
<body>
<p id="24HFormat"></p>
</body>
</html>
Ausgang:
Standardmäßig geben diese Date-Objektmethoden die Uhrzeit im 24-Stunden-Format zurück. So können wir die Uhrzeit ganz einfach in unserem gewünschten Format auf unseren Websites anzeigen.
Im 12-Stunden-Format (hh: mm: ss)
Die Funktionen zum Abrufen der Stunden, Minuten und Sekunden wurden bereits in der vorherigen Methode behandelt, und wir haben gelernt, dass diese Funktionen das 24-Stunden-Format zurückgeben. Wir müssen jetzt das 24-Stunden-Format in das 12-Stunden-Format konvertieren.
Untersuchen Sie den folgenden Code, um ihn richtig zu verstehen.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
var date = new Date();
var hours = date.getHours() > 12 ? date.getHours() - 12 : date.getHours();
var am_pm = date.getHours() >= 12 ? "PM" : "AM";
hours = hours < 10 ? "0" + hours : hours;
var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
time = hours + ":" + minutes + ":" + seconds + " " + am_pm;
$("#12HFormat").text(time);
});
</script>
</head>
<body>
<p id="12HFormat"></p>
</body>
</html>
Ausgang:
Sie könnten annehmen, dass dies eine Menge Codierung ist, aber es ist einfach. Sehen wir uns an, was wir im Code im Detail tun.
Um die Zeit in das 12-Stunden-Format umzuwandeln, prüfen wir zunächst, ob der von der Methode getHours() zurückgegebene Wert größer als 12 ist, und wenn ja, ziehen wir 12 davon ab. Zweitens entscheiden wir zwischen AM und PM, indem wir prüfen, ob die Stunden größer oder gleich 12 sind, und dann PM anzeigen. Sonst AM.
In den folgenden drei Codezeilen prüfen wir nur, ob der Wert kleiner als 10 ist, hängen 0 daran an, damit er als 01 oder 02 angezeigt werden kann usw.