So erstellen Sie einen Countdown -Timer in JavaScript

Countdown -Timer sind eine Art virtuelle Uhren, die die Zeit bis zu einem bestimmten Datum für den Start oder Ende eines besonderen Anlasss zählen. Sie wurden hauptsächlich auf der Zielseite neuer bevorstehender Websites verwendet, aber jetzt haben sie ihren Weg in E-Commerce-Websites gefunden.

Das Element „Time läuft ab“ auf den Countdown-Seiten dabei, Dringlichkeit zu erstellen, um mehr Conversions auf E-Commerce. Timer können auch auf Websites oder Blogs verwendet werden, um einen Countdown für besondere Ereignisse i anzuzeigen. I.e. Jubiläen, Geburtstage, Meetings usw. Countdown -Timer können auch verwendet werden, um die Zeit zu zählen, bis ein Angebot verfügbar ist

In dieser Anleitung werden wir in Vanille JavaScript einen Zeitzähler erstellen, anstatt Bibliotheken oder Plugins von Drittanbietern zu verwenden. Die Vorteile der Erstellung der Countdown -Uhr in Vanille JavaScript sind wie folgt:

• Der Code ist leichter, da es keine Abhängigkeiten gibt.
• Verbessert die Website der Website, da keine externen Stylesheets und Skripte geladen werden müssen.

So erstellen Sie einen Countdown -Timer in JavaScript

Die Grundlagen des Countdown -Timers sind wie folgt:

Legen Sie das Enddatum des Timers fest

Der erste Schritt zum Erstellen eines Countdown -Timers besteht darin, das Enddatum des Timers festzulegen. In diesem Schritt deklarieren wir eine Variable und weisen den Wert des Enddatums unseres Timers mit der Datum Objekt:

var enddate = neues Datum ('20. August 2021 00:00:00').Zeit bekommen();

Im obigen Beispiel haben wir die verwendet .Zeit bekommen() Methode; Das liegt daran, dass die .Zeit bekommen() Die Methode wandelt das Datum in ein verwendbareres Format um. Es gibt die Anzahl der Millisekunden zurück, die seit der Mitternacht des 1. Januar 1970 vergangen sind, was es einfacher macht, mathematische Operationen auf dem Endtermin Variable.

Machen Sie ein Timing -Event -Funktion

Jetzt werden wir eine machen setInterval () Funktion, die nach dem angegebenen Zeitintervall wiederholt den Code darin ausführt. Dies liegt daran, dass wir unseren Timer nach jeder Sekunde aktualisieren möchten:

var Countdowntimer = setInterval (() =>
// Alle unten erwähnten JavaScript -Code gingen in diese Funktion ein
, 1000);

Der setInterval () Funktion nimmt das Intervallargument in Millisekunden an; Da es 1000 Millisekunden in einer Sekunde gibt und wir die Theke nach jeder Sekunde aktualisieren möchten, haben wir 1000 als Intervall der Timing -Ereignisfunktion gegeben.

Berechnung der Zeit

Jetzt schreiben wir Code in die setInterval () Funktion. In diesem Schritt werden wir die verbleibende Zeit bis zur Endzeit des Zählers berechnen:

var jetzt = neues Datum ().Zeit bekommen();
var remingtime = enddate - jetzt;

Nun der Wert der verbleibenden Zeit in der Variablen verbleibende Zeit ist in Form von Millisekunden, aber wir möchten die verbleibende Anzahl von Tagen, Stunden, Minuten und Sekunden zeigen, damit wir die Anzahl der Millisekunden in unsere erforderlichen Zeiträume umwandeln müssen:

const Second = 1000;
const minute = zweiter * 60;
const stunde = Minute * 60;
const tag = stunde * 24;
DaysLeft = Math.TRUNC (Restzeit / Tag);
stundenleft = math.TRUNC ((Resttime % Day) / Stunde);
MinuteLeft = Math.TRUNC ((verbleibende Zeit % Stunde) / Minute);
SecondsLeft = Math.TRUNC ((verbleibende Zeit % Minute) / Sekunde);

Es gibt 1.000 Millisekunden in einer Sekunde, 60.000 Millisekunden (1000*60) in einer Minute, 3.600.000 Millisekunden (1000*60*60) in einer Stunde und 86.400.000 Millisekunden (1000*60*60*24) an einem Tag.

Wir haben die Tage berechnet, indem wir die Menge der in den vorhandenen Millisekunden unterteilt haben verbleibende Zeit durch die Menge an Millisekunden an einem Tag; Wenn es 86.400.000 Millisekunden übrig sind, dann übrig Tage übrig wird gleich einem sein (86.400.000/86.400.000), wenn es dann 172.800.000 Millisekunden übrig sind Tage übrig wird 2 (172.800.000/86.400.000) und so weiter sein. Die von der (verbleibende Zeit / Tag) Operation zurückgegebene Zahl ist meistens eine Dezimalzahl, aber wir brauchen nur den gesamten Zahlenteil, sodass wir die verwendet haben Mathematik.Trun () Methode.

Um die zu berechnen Stunden übrig Wir haben die Tage zum ersten Mal losgeworden, indem wir den Modul -Operator benutzten. Dann haben wir die Stunden aus der verbleibenden Zeit berechnet. Wir können die berechnen Minuten übrig Und SecondsLeft Variablen ähnlich.

Timer anzeigen

In diesem Schritt werden wir dem HTML -Körper einen Code (Tags) in den HTML -Körper hinzufügen. Dann zugreifen wir auf diese Tags in der setInterval () Funktion und ändern Sie sie, um den Timer auf der Webseite anzuzeigen:

In der setInterval () Funktion:

dokumentieren.QuerySelector ('#Days').Innerhtml = DaysLeft + 'Days';
dokumentieren.QuerySelector ('#Stunden').Innerhtml = stundenleft + 'Stunden';
dokumentieren.QuerySelector ('#Minuten').Innerhtml = minuteLeft + 'Minuten';
dokumentieren.QuerySelector ('#Sekunden').Innerhtml = SecondSleft + 'Sekunden';

Jetzt werden wir mehr Code in der hinzufügen setInterval () Funktion, die ausgeführt wird, falls der Timer abgelaufen ist:

if (verbleibende Zeit <= 0)
dokumentieren.schreibe ('Zeit nach oben!');

Insgesamt sollte die HTML -Datei für einen Countdown -Timer ungefähr so ​​aussehen:

Ein Countdown -Timer wurde erfolgreich gemacht; Jetzt können Sie es mit CSS stylen.

Abschluss

Countdown -Timer werden von bald Live -Websites sowie vielen E -Commerce -Websites verwendet. Die E -Commerce -Websites verwenden Timer, um den Kunden zu überreden, schnelle Entscheidungen zu treffen. Die Lösung dieses Beitrags bestand darin, die Erstellung eines Countdown -Timers in JavaScript zu untersuchen.