So erstellen Sie einen Countdown-Timer in JavaScript: Ein einfacher Leitfaden für Anfänger

Erstellen eines Countdown-Timers JavaScript ist eine gute Möglichkeit, Ihrer Website Interaktivität und Funktionalität hinzuzufügen. Mit einem Countdown-Timer können Sie die verbleibende Zeit bis zu einem bestimmten Datum oder Ereignis verfolgen, was für Aktionen, Verkäufe oder bevorstehende Veranstaltungen nützlich sein kann. In diesem einfachen Leitfaden werden wir uns die Grundlagen zum Erstellen eines Countdown-Timers mit JavaScript ansehen.

Zunächst werden wir die Programmiersprache JavaScript verwenden, um einen Countdown-Timer zu erstellen. JavaScript ist eine beliebte Programmiersprache, mit der Sie dynamische und interaktive Elemente auf Webseiten erstellen können.

In diesem Leitfaden werden wir JavaScript-Methoden verwenden, um mit Datumsangaben zu arbeiten. Wir bestimmen das Datum, an dem die Zeit gezählt wird, und aktualisieren den Timer dann jede Sekunde. Dabei verwenden wir Funktionen, bedingte Operatoren und spezielle Methoden, um mit Datumsangaben in JavaScript zu arbeiten.

Was ist ein Countdown-Timer?

Der Countdown-Timer funktioniert, indem das Startdatum und die Uhrzeit sowie das Zieldatum und die Uhrzeit ermittelt werden. Es berechnet dann die Differenz zwischen den beiden und aktualisiert die Anzeige der verbleibenden Zeit jede Sekunde oder eine kürzere Zeitspanne, wenn eine genauere Anzeige erforderlich ist.

Normalerweise besteht ein Countdown aus einem Block, der die Anzahl der verbleibenden Tage, Stunden, Minuten und Sekunden bis zu einem Zielpunkt oder Ereignis anzeigt. Zusätzliche Stilisierung, Animationen oder Soundeffekte können ebenfalls hinzugefügt werden, um eine ansprechende Visualisierung zu erstellen.

Das Erstellen eines Countdown-Timers mit JavaScript ist eine ziemlich einfache Aufgabe und erfordert nicht viel Programmiererfahrung. Folgen Sie einfach den entsprechenden Schritten und Sie können diese Funktion zu jeder Webseite hinzufügen.

До Нового Года осталось:

Warum einen Countdown-Timer erstellen?

• Verbesserte Benutzererfahrung: Wenn Sie einen Countdown-Timer erstellen, können Sie die Erwartung festlegen und Ihrer Website oder Anwendung Interaktivität verleihen. Es kann verwendet werden, um einen Countdown vor Beginn einer Veranstaltung, dem Ende einer Aktion oder eines Rabatts, dem Veröffentlichungsdatum eines Produkts und mehr anzuzeigen. Dies hilft Benutzern, die verbleibende Zeit vor dem Ereignis zu kennen und vermittelt einen Eindruck von Glücksspiel und Interesse an Ihrem Produkt oder Ihrer Dienstleistung.
• Zeitmanagement: Ein Countdown-Timer kann verwendet werden, um eine begrenzte Zeit für die Ausführung einer bestimmten Aufgabe festzulegen. Dies kann nützlich sein, um die verbleibende Zeit zu bestimmen, um einen Job abzugeben oder sich zu bewerben. Es wird Ihnen helfen, Ihre Zeit zu organisieren und zu priorisieren und Aufgaben rechtzeitig zu erledigen.
• Stimulation der Aktion: Ein Countdown-Timer kann als Verstärkung oder Auslöser für Aktionen verwendet werden. Zum Beispiel kann es verwendet werden, um ein Gefühl von Dringlichkeit zu erzeugen, Benutzer zu ermutigen, einen Kauf zu tätigen oder eine Aktion durchzuführen, bevor der Timer abgeschlossen ist. Dies kann die Umwandlung erhöhen und den Menschen das Gefühl geben, dass sie etwas verlieren, wenn sie nicht schnell handeln.

Das Erstellen eines Countdown-Timers kann ein einfacher und interessanter Prozess sein, der den Benutzern zugute kommt und die Funktionalität Ihrer Website oder App verbessert.

Beispiel für die Anwendung eines Countdown-Timers

Im Folgenden finden Sie einen JavaScript-Beispielcode, der mithilfe von HTML-Elementen einen Countdown-Timer erstellt und startet.

function countdown() >var timerInterval = setInterval(countdown, 1000);

Sie können das Datum und die Uhrzeit in der Variablen EventDate ändern, um Ihren Endzeitpunkt festzulegen. Das Ergebnis wird in einem Element mit der ID "timer" angezeigt.

Dieses Beispiel zeigt, wie Sie den Countdown-Timer verwenden, um die verbleibende Zeit bis zu einem bestimmten Ereignis anzuzeigen. Ein solcher Timer kann nützlich sein, um einen Countdown für ein neues Jahr, einen Geburtstag oder ein anderes wichtiges Ereignis zu erstellen.

Schritte zum Erstellen eines Countdown-Timers

Das Erstellen eines Countdown-Timers in JavaScript mag eine entmutigende Aufgabe sein, aber es ist eigentlich ziemlich einfach. Hier sind einige Schritte, die Ihnen helfen, Ihren eigenen Timer zu erstellen:

Schritt 1: Erstellen Sie HTML-Markup, um den Timer anzuzeigen. Sie benötigen HTML-Elemente, um Stunden, Minuten und Sekunden anzuzeigen.

Es bleibt bis zum Ende der Aktion:

Schritt 2: Fügen Sie den erforderlichen JavaScript-Code hinzu, um die Variablen und Funktionen für den Timer zu definieren.

// Bestimmen der erforderlichen Variablen

var countdown; // zum Speichern der Timer-ID

var targetDate = new Date("2025-01-01").getTime(); // Bestimmung des Zieldatums

// Definieren einer Funktion zum Aktualisieren des Timers

var now = new Date().getTime(); // aktuelles Datum und Uhrzeit

// Die Zeit für die Anzeige berechnen

var distance = targetDate - now;

var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));

var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));

var seconds = Math.floor((distance % (1000 * 60)) / 1000);

// Zeitanzeige auf der Seite

document.getElementById("timer").innerHTML = hours + ":" + minutes + ":" + seconds;

// Überprüfen, ob die Zeit abgelaufen ist

clearInterval(countdown); // Stopp des Timers

document.getElementById("timer").innerHTML = "Die Zeit ist abgelaufen";

// Starten Sie den Timer jede Sekunde

countdown = setInterval(updateTimer, 1000);

In diesem Code wird die Countdown-Variable verwendet, um die Timer-ID zu speichern, damit sie später bei Bedarf angehalten werden kann. Die Variable targetDate gibt das gewünschte Enddatum und die gewünschte Endzeit für den Timer an.

Schließlich wird setInterval verwendet, um die updateTimer-Funktion jede Sekunde auszuführen, indem der Timer auf der Seite aktualisiert wird.

Schritt 1: Erstellen einer HTML-Struktur

Bevor Sie mit der Erstellung eines Countdowns beginnen, müssen Sie eine entsprechende HTML-Struktur erstellen, die die mit der Anzeige des Timers verbundenen Elemente enthält.

Erstellen Sie zunächst einen Container, in dem sich alle Zeitgeberelemente befinden:

00
дни
00
часы
00
минуты
00
секунды

In diesem Beispiel wird ein div mit der ID "countdown-Timer" als Hauptcontainer für den Timer verwendet. Darin befinden sich vier p-Elemente mit den eindeutigen IDs "days" , "hours" , "minutes" und "seconds" . Jeder zeigt die entsprechende Zeiteinheit an: Tage, Stunden, Minuten und Sekunden.

Zwischen jedem p -Element und seiner Zeiteinheit befindet sich ein Span-Element, das den Namen der entsprechenden Zeiteinheit enthält.

Nachdem Sie nun die HTML-Struktur erstellt haben, können Sie mit dem Schreiben von JavaScript-Code beginnen, um einen Countdown-Timer zu implementieren.

Schritt 2: Definieren von Variablen und Funktionen

Nachdem wir das grundlegende Markup unseres Countdown-Timers erstellt haben, müssen Sie die Variablen und Funktionen definieren, die verwendet werden, um damit zu arbeiten.

Im ersten Schritt erstellen wir Variablen, um die Zeitwerte zu speichern, die wir zählen werden: Tage , Stunden , Minuten und Sekunden . Wir erstellen auch eine Variable targetDate , in der das Zieldatum gespeichert wird.

Als nächstes definieren wir die Countdown-Funktion, die für die Aktualisierung der Zeitgeberwerte verantwortlich ist. Innerhalb der Funktion berechnen wir die verbleibende Zeit bis zum Zieldatum und aktualisieren die Werte der Variablen. Wenn die verbleibende Zeit kleiner oder gleich Null ist, stoppen wir den Timer, damit er nicht weiterläuft.

Außerdem erstellen wir eine Hilfsfunktion updateDisplay, die die Anzeige der Zeitgeberwerte auf der Seite aktualisiert. Innerhalb der Funktion werden wir mit ihren IDs auf die gewünschten Markupelemente zugreifen und neue Werte festlegen.

Schließlich erstellen wir eine startCountdown-Funktion, die das Intervall für die Ausführung der Countdown-Funktion jede Sekunde einstellt. Diese Funktion wird beim Laden der Seite aufgerufen und der Countdown-Timer wird gestartet.

Jetzt haben wir alle notwendigen Variablen und Funktionen, um den Timer zu betreiben. Im nächsten Schritt verbinden wir diese Funktionen mit den entsprechenden Markupelementen und testen den Timer.

Schritt 3: Schreiben der Timer-Logik

Jetzt, da wir das fertige Markup und die Stile haben, ist es an der Zeit, die Timer-Logik zu schreiben. Beginnen wir mit der Erstellung von Variablen, die Zeitwerte und IDs für die Arbeit mit dem Timer speichern.

let deadline = new Date('December 31, 2025 23:59:59').getTime();let daysElem = document.getElementById('days');let hoursElem = document.getElementById('hours');let minutesElem = document.getElementById('minutes');let secondsElem = document.getElementById('seconds');let timer;

Hier erstellen wir eine Variable deadline und wir weisen ihr das Datum und die Uhrzeit zu, bis zu der der Timer arbeiten soll. Wir verwenden new Date() um ein Datums- und Uhrzeitobjekt zu erstellen, rufen Sie dann die Methode auf getTime(), um die Anzahl der Millisekunden zu erhalten, die seit dem 1. Januar 1970 vor dem angegebenen Datum vergangen sind.

Als nächstes erstellen wir Variablen für jedes Timer-Element, die die verbleibende Zeit anzeigen. Wir verwenden document.getElementById(), um auf die entsprechenden Elemente anhand ihrer IDs zuzugreifen.

Dann erstellen wir eine Variable timer, die verwendet wird, um mit dem Timer zu arbeiten.

Lassen Sie uns nun eine Funktion erstellen, die die Werte der Timer-Elemente jede Sekunde aktualisiert.

function updateTimer() >

Innerhalb der Funktion erhalten wir zuerst die aktuelle Zeit in Millisekunden mit new Date().getTime(). Dann berechnen wir die verbleibende Zeit, indem wir die aktuelle Zeit vom Wert der Variablen subtrahieren deadline.

Dann berechnen wir die Anzahl der verbleibenden Tage, Stunden, Minuten und Sekunden, indem wir den Wert der Variablen teilen timeLeft auf die entsprechenden Quoten.

Dann überprüfen wir, ob die verbleibende Zeit kleiner als Null ist, dann stoppen wir den Timer mit clearInterval(timer) und wir können eine Nachricht ausgeben, dass die Zeit abgelaufen ist.

Schließlich müssen Sie nur noch den Timer starten und die Werte der Elemente jede Sekunde aktualisieren. Fügen Sie dazu den folgenden Code hinzu:

timer = setInterval(updateTimer, 1000);

Hier verwenden wir die Funktion setInterval(), die die Funktion aufrufen wird updateTimer() jede Sekunde.

Jetzt ist unser Countdown-Timer fertig! Es wird die verbleibende Zeit bis zum angegebenen Datum angezeigt. Sie können diesen Code in Ihren Projekten verwenden und an Ihre Bedürfnisse anpassen.

Schritt 4: Binden des Timers an HTML-Elemente

Nachdem wir nun einen Countdown-Timer in JavaScript erstellt haben, müssen Sie ihn mit HTML-Elementen verknüpfen, damit der Benutzer sehen kann, wie viel Zeit bis zum Ende noch bleibt.

Um zu beginnen, fügen wir der HTML-Seite Elemente hinzu, die die Zeitgeberwerte anzeigen. Zum Beispiel können wir Elemente für die Ziffern von Stunden, Minuten und Sekunden erstellen.

00:00:00

Dann müssen wir auf diese Elemente in JavaScript zugreifen, um ihre Werte entsprechend dem Timer zu aktualisieren. Wir können dies mit der getElementById-Methode tun.

const hoursLabel = document.getElementById("hours");const minutesLabel = document.getElementById("minutes");const secondsLabel = document.getElementById("seconds");

Als nächstes werden wir innerhalb der updateTimer-Funktion die Werte der Elemente mit ihrer textContent-Eigenschaft aktualisieren.

hoursLabel.textContent = hours;minutesLabel.textContent = minutes;secondsLabel.textContent = seconds;

Jetzt ändern sich die Werte in den Elementen bei jeder Aktualisierung des Timers automatisch und zeigen die verbleibende Zeit an.

Stellen Sie sicher, dass Sie alle erforderlichen Stile hinzufügen, damit die Elemente auf der Seite sichtbar und im gewünschten Format angezeigt werden.