Erstellen Sie einen Timer und eine Uhr mit jQuery
- Erstellen Sie einen Timer in jQuery
-
Erstellen Sie eine Uhr in jQuery mit
setTimeoutund jQuerytext()API -
Erstellen Sie eine Uhr in jQuery mit der API
setIntervalund jQueryhtml()
Dieser Artikel stellt drei Beispiele für das Erstellen eines Timers und einer Uhr in jQuery vor. Das erste Beispiel ist ein Timer, der startet, sobald Sie die Seite öffnen, während das zweite und dritte Beispiel eine anders implementierte Uhr enthalten.
Erstellen Sie einen Timer in jQuery
Um einen Timer in jQuery zu erstellen, benötigen Sie das Date-Objekt, setInterval(), Math.round() und die jQuery text()-API. Mit dem Objekt Datum können Sie die Zeitdifferenz in Sekunden berechnen.
Gleichzeitig führt die Funktion setInterval() die Berechnungen jederzeit durch. Als Ergebnis wird der Timer angezeigt, wenn Sie das Skript in Ihrem Webbrowser starten.
Die Aufgabe der jQuery text() API besteht darin, den Timer in einem ausgewählten HTML-Element zu platzieren. Schließlich ermöglicht die Funktion Math.round(), dass der Timer als ganze Zahlen und nicht als Dezimalwerte angezeigt wird.
Im Folgenden haben wir alles zusammengestellt, und Sie können den Code ausführen, um das Ergebnis in Ihrem Webbrowser anzuzeigen.
<!DOCTYPE html>
<html lang="en">
<head>
<title>01-clock-with-jQuery-</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<div style="text-align: center; font-size: 5em;">
<b class="jquery_timer"></b>
</div>
<script>
// Create a new date object.
var date_object = new Date;
// Use setInterval to run a custom function
// that displays the timer at all times.
setInterval(function() {
// Additional information to aid user experience.
let prepend_text = "You've spent ";
let append_text = " on this page."
// Use Math.round() to remove any decimal
// number from the timer.
$('.jquery_timer').text(prepend_text + Math.round((new Date - date_object) / 1000) + " Seconds" + append_text);
}, 1000);
</script>
</body>
</html>
Ausgang:
Erstellen Sie eine Uhr in jQuery mit setTimeout und jQuery text() API
Der Kern dieser Uhr ist eine benutzerdefinierte Funktion, die das Objekt Date verwendet, um das Datum zu berechnen. Dazu verwenden Sie die Methoden getHours(), getMinutes() und getSeconds() des Date-Objekts.
Wenn Sie diese drei Methoden kombinieren, können Sie die Stunden, Minuten und Sekunden der Uhr anzeigen. Anschließend verwenden Sie die jQuery-API text(), um die Uhr in einem HTML-Element zu platzieren.
Davor rufen Sie setTimeout() für die benutzerdefinierte Funktion auf, die in regelmäßigen Abständen ausgeführt wird. Letzterer sollte klein genug sein und nicht dazu führen, dass die Zeit ungenau angezeigt wird.
Unser Codebeispiel unten hat die Uhr mit allen Informationen implementiert. Sie zeigen die Uhr an, nachdem Sie auf die HTML-Schaltfläche geklickt haben, um sie interessanter zu machen.
<!DOCTYPE html>
<html lang="en">
<head>
<title>02-clock-with-jQuery</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<style>
button {
cursor: pointer;
}
</style>
</head>
<body>
<main style="text-align: center; font-size: 3em;">
<button class="show_clock" style="font-size: 1em;">Show Clock</button>
<h1 class="clock_location"></h1>
</main>
<script>
$(document).ready(function(){
function get_current_date(){
let current_date = new Date();
let hours = current_date.getHours();
let minutes = current_date.getMinutes();
let seconds = current_date.getSeconds();
// Add a leading zero to the seconds and minutes if
// they are less than 10
if (seconds < 10){
seconds = "0" + seconds;
}
if (minutes < 10) {
minutes = "0" + minutes;
}
$(".clock_location").text(hours+" : "+minutes+" : "+seconds);
setTimeout(function(){
get_current_date()
}, 500);
}
// Wait for the user to click the button
// before you show the clock.
$(".show_clock").click(get_current_date);
});
</script>
</body>
</html>
Ausgang:
Erstellen Sie eine Uhr in jQuery mit der API setInterval und jQuery html()
Wie in unserem vorherigen Beispiel erstellen Sie eine Uhr mit jQuery, aber anders. Das liegt daran, dass Sie hier die Funktion setInterval() und die API html() von jQuery verwenden.
Zuerst rufen Sie die Funktion setInterval() für eine anonyme Funktion auf. Diese Funktion berechnet das Datum und zeigt es in Ihrem Webbrowser an.
Die Funktion verwendet das Date-Objekt, um die aktuelle Stunde, Minuten und Sekunden abzurufen. Sie können den Uhrenteilen führende Nullen hinzufügen und sie für die Anzeige zusammenstellen.
Verwenden Sie anschließend jQuery, um ein HTML-Element zu greifen, in dem Sie die Uhr anzeigen möchten. Der letzte Schritt besteht darin, die jQuery html()-API zur zusammengesetzten Zeit aufzurufen und sie im HTML-Element anzuzeigen.
<!DOCTYPE html>
<html lang="en">
<head>
<title>03-clock-with-jQuery</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<main style="text-align: center; font-size: 5em;">
<p class="clock_location"></p>
</main>
<script>
// Use setInterval to run an anonymous function
// every one milliseconds.
setInterval(function() {
let current_date = new Date();
let clock_hours = current_date.getHours();
let clock_minutes = current_date.getMinutes();
let clock_seconds = current_date.getSeconds();
// Use the ternary operator to add leading
// zeros to elements of the clock if they
// are less than 10.
if (clock_hours < 10) {
clock_hours = "0" + clock_hours;
}
if (clock_minutes < 10) {
clock_minutes = "0" + clock_minutes;
}
if (clock_seconds < 10){
clock_seconds = "0" + clock_seconds;
}
// Compose the current time
let clock_delimeter = ":";
let current_time = clock_hours + clock_delimeter + clock_minutes + clock_delimeter + clock_seconds;
$(".clock_location").html(current_time);
}, 1000);
</script>
</body>
</html>
Ausgang:
Habdul Hazeez is a technical writer with amazing research skills. He can connect the dots, and make sense of data that are scattered across different media.
LinkedIn