So stellen Sie den Countdown in Javascript ein

JavaScript-Einstellungs-Countdown

Countdown ist eine sehr interessante und praktische Funktion. Auf der Website kann es verwendet werden, um Benutzer an das Eintreffen bestimmter wichtiger Ereignisse zu erinnern, z. B. an die Verkaufszeit, die Zeit des Hauptverkaufs usw. In diesem Artikel erfahren Sie, wie Sie mit JavaScript einen Countdown festlegen.

Schritt 1: Aktuelle Uhrzeit abrufen

Das Abrufen der aktuellen Uhrzeit ist der erste Schritt zur Implementierung der Countdown-Funktion. Um die aktuelle Uhrzeit abzurufen, können Sie die integrierten Funktionen von JavaScript verwenden. Hier ist ein Beispielcode zum Abrufen der aktuellen Uhrzeit:

var currentDate = new Date();

Der obige Code erstellt ein Date-Objekt, das das aktuelle Datum und die aktuelle Uhrzeit darstellt.

Schritt 2: Frist festlegen

Nachdem Sie die aktuelle Uhrzeit ermittelt haben, besteht der nächste Schritt darin, die Frist festzulegen. Die Frist kann manuell angegeben oder vom Server bezogen werden. Das Folgende ist ein Beispielcode zum manuellen Festlegen der Frist:

var dueDate = new Date('2021-12-31 23:59:59');

Der obige Code erstellt ein Date-Objekt, das den Zeitpunkt 23:59:59 am 31. Dezember 2021 darstellt.

Schritt 3: Berechnen Sie die Countdown-Zeit

Nachdem Sie die aktuelle Uhrzeit ermittelt und die Frist festgelegt haben, besteht der nächste Schritt darin, die Countdown-Zeit zu berechnen. Die Berechnung der Countdown-Zeit ist so einfach wie das Subtrahieren des aktuellen Datums vom Fälligkeitsdatum. Hier ist ein Beispielcode, der die Countdown-Zeit berechnet:

var timeLeft = dueDate.getTime() - currentDate.getTime();

Der obige Code berechnet die Anzahl der Millisekunden zwischen dem Stichtag und dem aktuellen Datum. Wenn wir sie in Tage, Stunden, Minuten und Sekunden umrechnen möchten, können wir sie wie folgt umrechnen:

var days = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
var hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);

Der obige Code wandelt Millisekunden in Tage, Stunden, Minuten und Sekunden um.

Schritt 4: Countdown anzeigen

Nach der Berechnung der Countdown-Zeit besteht der letzte Schritt darin, die Countdown-Zeit auf der Webseite anzuzeigen. Dies kann erreicht werden, indem die Countdown-Zeit dem textContent-Attribut des HTML-Elements zugewiesen wird. Hier ist ein Beispielcode, der einen Countdown anzeigt:

document.getElementById('countdown').textContent = days + ' 天 ' + hours + ' 小时 ' + minutes + ' 分钟 ' + seconds + ' 秒 ';

Der obige Code zeigt die berechnete Anzahl von Tagen, Stunden, Minuten und Sekunden auf dem HTML-Element mit der ID-Countdown an.

Schritt 5: Aktualisieren Sie den Countdown in Echtzeit

Der obige Code berechnet den Countdown nur und zeigt ihn an, wenn die Seite geladen wird. Wenn Sie den Effekt einer Aktualisierung des Countdowns in Echtzeit erzielen möchten, können Sie setInterval verwenden Funktion. Mit der Funktion setInterval kann eine Funktion regelmäßig ausgeführt werden, wodurch der Countdown in Echtzeit aktualisiert wird. Das Folgende ist ein Beispielcode, der die setInterval-Funktion verwendet, um einen Aktualisierungs-Countdown in Echtzeit zu implementieren:

setInterval(function() {
  var currentDate = new Date();
  var timeLeft = dueDate.getTime() - currentDate.getTime();
  var days = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
  var hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);
  document.getElementById('countdown').textContent = days + ' 天 ' + hours + ' 小时 ' + minutes + ' 分钟 ' + seconds + ' 秒 ';
}, 1000);

Im obigen Code führt die setInterval-Funktion alle 1000 Millisekunden (d. h. 1 Sekunde) eine anonyme Funktion aus und erzielt so den Effekt von real -Time-Update-Countdown.

Zusammenfassung

Countdown ist eine sehr praktische und interessante Funktion, die auf Webseiten verwendet werden kann, um die Aufmerksamkeit der Benutzer zu erregen. Das Einrichten eines Countdowns mit JavaScript ist nicht kompliziert und erfordert nur wenige Schritte. Rufen Sie zuerst die aktuelle Uhrzeit ab, legen Sie dann die Frist fest, berechnen Sie dann die Countdown-Zeit und zeigen Sie schließlich die Countdown-Zeit auf der Webseite an. Wenn Sie den Countdown in Echtzeit aktualisieren möchten, können Sie die Funktion setInterval verwenden.

Das obige ist der detaillierte Inhalt vonSo stellen Sie den Countdown in Javascript ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!