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!