Erstellen Sie einen Countdown -Timer in nur 18 Zeilen von JavaScript

Es ist manchmal erforderlich, eine JavaScript -Countdown -Uhr zu erstellen, ob es sich um eine Veranstaltung, eine Aktion oder ein Spiel handelt. Sie können die Uhr mit nativem JavaScript erstellen, ohne sich auf Plugins zu verlassen. Obwohl es viele hervorragende Uhr -Plugins gibt, hat die Verwendung natives JavaScript die folgenden Vorteile:

Code Leichtes Gewicht, Zero -Abhängigkeit.
Die Website bietet besser, ohne externe Skripte und Stylesheets zu laden.
Mit mehr Kontrolle können Sie das Verhalten der Uhr genau steuern, ohne zu versuchen, das Plug-in zu biegen, um Ihren Anforderungen zu entsprechen.

Hier finden Sie Ihre eigene Countdown -Uhr mit nur 18 Zeilen JavaScript -Code:

Um ein detailliertes Verständnis von JavaScript zu erlangen, lesen Sie bitte unser Buch "JavaScript: Novice to Ninja, 2. Ausgabe".

Schlüsselpunkte

Sie können eine leichte und effiziente Countdown -Uhr mit JavaScript ohne Abhängigkeiten erstellen und eine bessere Leistung und Steuerung bieten, ohne externe Skripte und Stylesheets zu laden.
Dieser Vorgang beinhaltet das Einstellen eines gültigen Enddatums, die Berechnung der verbleibenden Zeit, die Konvertierung der Zeit in verfügbare Formate, das Ausgeben der Taktdaten als wiederverwendbares Objekt und Anzeigen der Uhr auf der Seite und das Stoppen, wenn Null erreicht ist.
Sie können die Taktanzeige optimieren, indem Sie die anfängliche Verzögerung entfernen, nur die Zahlen in der Uhr aktualisieren, um die Skripteffizienz zu verbessern und nach Bedarf führende Nullen hinzuzufügen.
Für einige Anwendungsfälle können Uhren erweitert werden, z. B. automatisch die Uhr planen, einen Timer für eine bestimmte Zeit einstellen, wenn ein Benutzer eintrifft, und die Einhaltung des Uhrenders über die Seiten über die Seiten hinweg aufrechtzuerhalten, indem die Endzeit der Uhr in einem Cookie gespeichert wird.
Eine wichtige Warnung, die sich daran erinnern: JavaScript -Daten und -Anzeiten werden vom Computer des Benutzers entnommen, was bedeutet, dass Benutzer die JavaScript -Uhr beeinflussen können, indem sie die Zeit auf ihrem Computer ändern. In extrem sensiblen Situationen kann es erforderlich sein, Zeit vom Server zu erhalten.

Grunduhr: Countdown zu einem bestimmten Datum oder einer bestimmten Uhrzeit

Erstellen einer grundlegenden Uhr umfassen die folgenden Schritte:

Stellen Sie das gültige Enddatum fest.
Berechnen Sie die verbleibende Zeit.
Zeit in das verfügbare Format konvertieren.
Taktdaten als wiederverwendbares Objekt.
Zeigt die Uhr auf der Seite an und stoppt die Uhr, wenn Null erreicht ist.

Setzen Sie das gültige Enddatum

Erstens müssen Sie ein gültiges Enddatum festlegen. Dies sollte eine Zeichenfolge sein, die mithilfe der

-Methode von JavaScript in jedem Format verstanden werden kann. Zum Beispiel: Date.parse()

ISO 8601 Format:

const deadline = '2015-12-31';

Kurzformat:

const deadline = '31/12/2015';

oder langes Format:

const deadline = 'December 31 2015';

Mit jedem Format können Sie die genaue Zeit- und Zeitzone angeben (oder den Offset von UTC im Fall eines ISO -Datums angeben). Zum Beispiel:

const deadline = 'December 31 2015 23:59:59 GMT+0200';

Sie können in diesem Artikel mehr über das JavaScript -Datumsformat lesen.

Berechnen Sie die verbleibende Zeit

Der nächste Schritt besteht darin, die verbleibende Zeit zu berechnen. Wir müssen eine Funktion schreiben, die eine Zeichenfolge akzeptiert, die eine bestimmte Endzeit darstellt (wie oben beschrieben). Wir berechnen dann den Unterschied zwischen dieser Zeit und der aktuellen Zeit. Wie unten gezeigt:

const deadline = '2015-12-31';

Erstens erstellen wir eine Variable total, um die verbleibende Zeit vor Ablauf der Frist zu speichern. Die Date.parse() -Funktion wandelt eine Zeitzeichenfolge in Millisekunden in einen Wert um. Dies ermöglicht es uns, zweimal voneinander zu subtrahieren und die Zeit zwischen den beiden zu erhalten.

const deadline = '31/12/2015';

Zeit in das verfügbare Format

konvertieren

Jetzt wollen wir Millisekunden in Tage, Stunden, Minuten und Sekunden umwandeln. Nehmen wir uns als Beispiel Sekunden ein:

const deadline = 'December 31 2015';

Lassen Sie uns zusammenbrechen, was hier vor sich geht.

1. Millisekunden um 1000 bis Sekunden teilen: (t/1000)
2. Teilen Sie die Gesamtzahl der Sekunden um 60 und erhalten Sie den Rest. Sie brauchen nicht alle Sekunden, Sie müssen nur die verbleibenden Sekunden nach der Minute berechnen: (t/1000) % 60
3. runden Sie es zur nächsten Ganzzahl um. Dies liegt daran Math.floor( (t/1000) % 60 )
Wiederholen Sie diese Logik, um Millisekunden in Minuten, Stunden und Tage umzuwandeln.

Taktdaten als wiederverwendbares Objekt

Wenn wir die Tage, Stunden, Minuten und Sekunden vorbereiten, können wir die Daten jetzt als wiederverwendbares Objekt zurückgeben:

Mit diesem Objekt können Sie Ihre Funktion aufrufen und einen berechneten Wert erhalten. Hier ist ein Beispiel dafür, wie man die verbleibenden Minuten bekommt:

const deadline = 'December 31 2015 23:59:59 GMT+0200';

Ist es bequem?

function getTimeRemaining(endtime){
  const total = Date.parse(endtime) - Date.parse(new Date());
  const seconds = Math.floor( (total/1000) % 60 );
  const minutes = Math.floor( (total/1000/60) % 60 );
  const hours = Math.floor( (total/(1000*60*60)) % 24 );
  const days = Math.floor( total/(1000*60*60*24) );

  return {
    total,
    days,
    hours,
    minutes,
    seconds
  };
}

Zeigen Sie die Uhr an und stoppen Sie sie, wenn sie null

erreicht

Jetzt haben wir eine Funktion, die die verbleibenden Tage, Stunden, Minuten und Sekunden ausgibt, und wir können unsere Uhr bauen. Zunächst erstellen wir das folgende HTML -Element, um unsere Uhr zu speichern:

Dann schreiben wir eine Funktion, die Taktendaten in unsere neue DIV ausgibt:

const total = Date.parse(endtime) - Date.parse(new Date());

Diese Funktion nimmt zwei Parameter an. Sie sind die ID des Elements, das unsere Uhr und die Endzeit des Countdowns enthält. In der Funktion deklarieren wir eine

const seconds = Math.floor( (t/1000) % 60 );

-Variable und speichern einen Verweis auf unseren Clock -Container -Div. Dies bedeutet, dass wir den DOM nicht weiter abfragen müssen.

clock Als nächstes werden wir eine anonyme Funktion pro Sekunde mit

ausführen. Diese Funktion wird Folgendes ausführen:

setInterval

Berechnen Sie die verbleibende Zeit.

• die verbleibende Zeit auf unsere Div ausgeben.
• Wenn die verbleibende Zeit Null erreicht, stoppen Sie die Uhr.
Zu diesem Zeitpunkt besteht der einzige verbleibende Schritt darin, die Uhr zu betreiben, wie unten gezeigt:

Herzlichen Glückwunsch! Sie haben jetzt nur noch 18 Zeilen JavaScript -Code, um eine grundlegende Uhr zu haben.

return {
  total,
  days,
  hours,
  minutes,
  seconds
};

Bereiten Sie sich darauf vor, Ihre Uhr

anzuzeigen

Wir müssen uns ein wenig verbessern, bevor wir den Taktstil festlegen.

• Entfernen Sie die anfängliche Verzögerung, damit Ihre Uhr sofort angezeigt wird.
• Machen Sie das Taktskript effizienter, damit die gesamte Uhr nicht kontinuierlich wieder aufgebaut wird.
• Fügen Sie nach Bedarf führende Nullen hinzu.

Löschen Sie die anfängliche Verzögerung

In der Uhr verwenden wir setInterval, um die Anzeige jede Sekunde zu aktualisieren. Dies ist in den meisten Fällen in Ordnung, aber zu Beginn wird es eine zweite Verzögerung geben. Um diese Verzögerung zu entfernen, müssen wir die Uhr einmal vor Beginn des Intervalls aktualisieren.

Lassen Sie uns die anonyme Funktion an setInterval in eine eigene Funktion verschieben. Wir können diese Funktion updateClock nennen. Rufen Sie die Funktion setInterval einmal außerhalb updateClock auf und rufen Sie sie in setInterval erneut auf. Auf diese Weise wird die Uhr unverzüglich angezeigt.

Ersetzen Sie in Ihrem JavaScript Folgendes:

const deadline = '2015-12-31';

Verwenden Sie Folgendes:

const deadline = '31/12/2015';

vermeiden Sie kontinuierlich umgebaut Takten

Wir müssen Taktskripte effizienter gestalten. Wir möchten nur die Zahlen in der Uhr aktualisieren, anstatt die gesamte Uhr jede Sekunde wieder aufzubauen. Eine Möglichkeit, dies zu tun, besteht darin, jede Zahl in ein <span> -Tag einzulegen und nur diese <span> -Inhalte zu aktualisieren.

Dies ist HTML:

const deadline = 'December 31 2015';

Lassen Sie uns jetzt einen Verweis auf diese Elemente erhalten. Fügen Sie den folgenden Code hinzu, nachdem Sie die clock Variable

definiert haben

const deadline = 'December 31 2015 23:59:59 GMT+0200';

Als nächstes müssen wir die Funktion updateClock ändern, um nur die Zahlen zu aktualisieren. Der neue Code wird so aussehen:

function getTimeRemaining(endtime){
  const total = Date.parse(endtime) - Date.parse(new Date());
  const seconds = Math.floor( (total/1000) % 60 );
  const minutes = Math.floor( (total/1000/60) % 60 );
  const hours = Math.floor( (total/(1000*60*60)) % 24 );
  const days = Math.floor( total/(1000*60*60*24) );

  return {
    total,
    days,
    hours,
    minutes,
    seconds
  };
}

Fügen Sie führende Nullen

hinzu

Jetzt, da die Uhr nicht mehr jede Sekunde wieder aufbaut, haben wir noch eine Sache zu tun: führende Nullen hinzufügen. Zum Beispiel wird in der Uhr nicht 7 Sekunden angezeigt, sondern 07 Sekunden angezeigt. Ein einfacher Weg besteht darin, am Anfang der Zahl eine "0" -Sziel hinzuzufügen und dann die letzten beiden Ziffern abzuschneiden.

Zum Beispiel, um dem Wert "Sekunden" führende Nullen hinzuzufügen, ändern Sie Folgendes:

const total = Date.parse(endtime) - Date.parse(new Date());

dafür:

const seconds = Math.floor( (t/1000) % 60 );

Sie können auch Minuten und Stunden führende Nullen hinzufügen, wenn Sie es vorziehen. Wenn Sie so weit gekommen sind, herzlichen Glückwunsch! Ihre Uhr ist jetzt zur Anzeige verfügbar.

Hinweis: Möglicherweise müssen Sie in CodePen auf "erneutes" klicken, um den Countdown zu starten.

gehen Sie noch einen Schritt weiter

Das folgende Beispiel zeigt, wie die Uhr für einige Anwendungsfälle skaliert werden kann. Sie basieren alle auf den oben gezeigten grundlegenden Beispielen.

planen automatisch die Uhr

Angenommen, wir möchten, dass die Uhr an einigen Tagen und nicht an anderen Tagen angezeigt wird. Zum Beispiel haben wir möglicherweise eine Reihe von bevorstehenden Ereignissen und möchten die Uhr nicht jedes Mal manuell aktualisieren. Hier erfahren Sie, wie Sie Dinge im Voraus arrangieren.

Verstecken Sie die Uhr, indem Sie die Eigenschaft der Uhr auf display einstellen. Fügen Sie dann Folgendes zur none -Funktion hinzu (nach der Zeile beginnend mit initializeClock). Dies führt dazu var clock initializeClock Als nächstes können wir den Datumsbereich angeben, den die Uhr anzeigen soll. Dies ersetzt die

Variable:

return {
  total,
  days,
  hours,
  minutes,
  seconds
};

const deadline = '2015-12-31';

schedule Jedes Element im Array stellt ein Startdatum und ein Enddatum dar. Wie oben erwähnt, können Zeit- und Zeitzonen enthalten sein, aber ich verwende hier normale Daten, um den Code lesbar zu halten.

Wenn der Benutzer die Seite lädt, müssen wir schließlich überprüfen, ob wir uns in einem bestimmten Zeitbereich befinden. Dieser Code sollte den vorherigen Aufruf an die Funktion initializeClock ersetzen.

const deadline = '31/12/2015';

Jetzt können Sie die Uhr im Voraus planen, ohne sie manuell zu aktualisieren. Sie können den Code nach Bedarf verkürzen. Zur Lesbarkeit mache ich meinen Code ausführlich.

Stellen Sie einen 10-minütigen Timer ein, wenn der Benutzer

ankommt

Es kann erforderlich sein, einen Countdown für einen bestimmten Zeitraum festzulegen, nachdem der Benutzer angekommen ist oder eine bestimmte Aufgabe gestartet hat. Wir werden hier einen 10-minütigen Timer festlegen, aber Sie können jede gewünschte Zeit verwenden.

Wir müssen nur die deadline Variable durch Folgendes ersetzen:

const deadline = 'December 31 2015';

Dieser Code erhält die aktuelle Zeit und fügt zehn Minuten hinzu. Die Werte werden in Millisekunden umgewandelt, sodass sie zusammengefügt und zu einer neuen Frist umgewandelt werden können.

Jetzt haben wir eine Uhr, die zehn Minuten nach dem Eintreffen des Benutzers zählt. Fühlen Sie sich frei, verschiedene Zeitlängen zu probieren.

Uhr Fortschritt über Seiten

Manchmal ist es notwendig, den Zustand der Uhr zu speichern, nicht nur die aktuelle Seite. Wenn wir einen 10-minütigen Timer auf der gesamten Website festlegen möchten, möchten wir nicht, dass es zurückgesetzt wird, wenn der Benutzer auf eine andere Seite geht.

Eine Lösung besteht darin, die Endzeit der Uhr im Cookie zu speichern. Auf diese Weise setzt das Navigieren zur neuen Seite in der Endzeit in zehn Minuten nicht zurück.

Dies ist die Logik:

1. Wenn die Frist im Cookie aufgezeichnet wird, wird die Frist verwendet.
2. Wenn das Cookie nicht existiert, wird eine neue Frist im Keks eingestellt und gespeichert.

Um dies zu erreichen, ersetzen Sie die Variable deadline durch Folgendes:

const deadline = 'December 31 2015 23:59:59 GMT+0200';

Dieser Code verwendet Cookies und reguläre Ausdrücke, die beide separate Themen sind. Deshalb werde ich hier nicht auf Details eingehen. Eine Sache zu beachten ist, dass Sie .yourdomain.com in Ihren tatsächlichen Domain -Namen ändern müssen.

Eine weitere wichtige Warnung zur Kundenzeit

JavaScript Datum und Uhrzeit werden vom Computer des Benutzers entnommen. Dies bedeutet, dass Benutzer die JavaScript -Uhr beeinflussen können, indem sie die Zeit auf ihrem Computer ändern. In den meisten Fällen spielt dies keine Rolle. In einigen extrem sensiblen Situationen muss jedoch die Zeit vom Server erhalten werden. Dies kann mit etwas PHP oder AJAX erfolgen, was über den Rahmen dieses Tutorials hinausgeht.

Nachdem wir Zeit vom Server erhalten haben, können wir in diesem Tutorial dieselben Techniken verwenden, um es zu verarbeiten.

Zusammenfassung

Nach Abschluss der Beispiele in diesem Artikel wissen Sie jetzt, wie Sie Ihren eigenen Countdown -Timer mit nur einer kleinen Menge nativem JavaScript -Code erstellen! Wir haben gelernt, wie man eine grundlegende Countdown -Uhr erstellt und sie effizient anzeigt. Wir haben auch einige nützliche zusätzliche Funktionen abgedeckt, einschließlich Planung, Absolute gegen relative Zeit und die Verwendung von Cookies, um Status zwischen Seiten- und Website -Zugriff zu speichern.

Nächste Schritte

Versuchen Sie, Ihren Taktcode zu verwenden. Fügen Sie einige kreative Stile oder neue Funktionen hinzu (z. B. Pause und Wiederherstellung von Schaltflächen). Wenn Sie danach coole Clock -Beispiele teilen möchten, lassen Sie es uns im Forum wissen.

häufig gestellte Fragen zur Verwendung von Zeit und Datum in JavaScript

Wie bekomme ich das aktuelle Datum und die aktuelle Uhrzeit in JavaScript? Sie können das Objekt Date verwenden, um das aktuelle Datum und die aktuelle Uhrzeit zu erhalten. Erstellen Sie einfach eine neue Instanz von Date ohne Parameter, die das aktuelle Datum und die aktuelle Uhrzeit darstellt.

Was sind die gemeinsamen Datums- und Uhrzeitoperationen in JavaScript? Zu den allgemeinen Operationen gehören Formatierungsdaten, Parsing -Datum -Zeichenfolgen, Berechnung von Zeitintervallen, Hinzufügen oder Subtrahieren und Vergleich von Daten.

Wie ist die empfohlene Möglichkeit, Zeitzonen in JavaScript umzugehen? Es ist am besten, die UTC -Zeit so weit wie möglich zu verwenden, um Zeitzonenprobleme zu vermeiden. Wenn Sie den Benutzer Zeit anzeigen, sollten Sie die Methode toLocaleString und die Option timeZone verwenden, um die gewünschte Zeitzone anzugeben.

Wie berechnet man den Unterschied zwischen zwei Daten in JavaScript? Sie können zwei Date Objekte subtrahieren, um Zeitintervalle in Millisekunden zu erhalten und sie mit mathematischen Operationen in Tage, Stunden, Minuten usw. umzuwandeln.

Kann ich leicht Daten in JavaScript manipulieren? Ja, JavaScript bietet einige Möglichkeiten, Zeitintervalle zu Daten hinzuzufügen und zu subtrahieren. Das Objekt Date verfügt über Methoden wie setFullYear, setMonth, setDate usw., die für Datumsoperationen verwendet werden.

Das obige ist der detaillierte Inhalt vonErstellen Sie einen Countdown -Timer in nur 18 Zeilen von JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!