JavaScript-Programm zum Erstellen eines Countdown-Timers

In diesem Beispiel lernen Sie, ein JavScript-Programm zu schreiben, das einen Countdown-Timer erstellt.

Um dieses Beispiel zu verstehen, sollten Sie die folgenden JavaScript-Programmierthemen kennen:

  • JavaScript Math Floor ()
  • JavaScript Datum und Uhrzeit
  • Javascript setInterval ()

Beispiel: Erstellen Sie einen Countdown-Timer

 // program to create a countdown timer // time to countdown from (in milliseconds) let countDownDate = new Date().getTime() + 24 * 60 * 60 * 1000; // countdown timer let x = setInterval(function() ( // get today's date and time in milliseconds let now = new Date().getTime(); // find the interval between now and the countdown time let timeLeft = countDownDate - now; // time calculations for days, hours, minutes and seconds const days = Math.floor( timeLeft/(1000*60*60*24) ); const hours = Math.floor( (timeLeft/(1000*60*60)) % 24 ); const minutes = Math.floor( (timeLeft/1000/60) % 60 ); const seconds = Math.floor( (timeLeft/1000) % 60 ); // display the result in the element with console.log(days + "d " + hours + "h " + minutes + "m " + seconds + "s "); // clearing countdown when complete if (timeLeft < 0) ( clearInterval(x); console.log('CountDown Finished'); ) ), 2000);

Ausgabe

 0d 23h 59m 57s 0d 23h 59m 55s 0d 23h 59m 53s 0d 23h 59m 51s…

Im obigen Programm wird die setInterval()Methode verwendet, um einen Timer zu erstellen.

Die setInterval()Methode wird in einer bestimmten Intervallzeit (hier 2000 Millisekunden) ausgeführt.

Das new Date()gibt das aktuelle Datum und die aktuelle Uhrzeit an. Beispielsweise,

 let d1 = new Date(); console.log(time); // Fri Aug 28 2020 09:19:40 GMT+0545 (+0545)

Die getTime()Methode gibt die Anzahl der Millisekunden von Mitternacht des 1. Januar 1970 (EcmaScript-Epoche) bis zum angegebenen Datum (hier aktuelles Datum) zurück.

Der folgende Code gibt die Zeit des nächsten Tages in Millisekunden an.

 new Date().getTime() + 24 * 60 * 60 * 1000;

Jetzt können wir die verbleibende Zeit mit der folgenden Formel berechnen:

 let timeLeft = countDownDate - now;

Die verbleibende Anzahl von Tagen wird berechnet mit:

  • Das Zeitintervall wird durch 1000 geteilt , um die Anzahl der Sekunden zu bestimmen, dhtimeLeft / 1000
  • Das Zeitintervall wird dann durch 60 * 60 * 24 geteilt , um die Anzahl der verbleibenden Tage zu bestimmen.
  • Die Math.floor()Funktion wird verwendet, um die Zahl auf eine ganze Zahl zu runden.

Ähnliche Methoden werden für Stunden, Minuten und Sekunden verwendet.

Hinweis : Sie können auch eine benutzerdefinierte Countdown-Startzeit verwenden, indem Sie ein bestimmtes Datum übergeben.

Beispielsweise,

 let countDownDate = new Date("Aug 5, 2025 14:22:36").getTime();

Interessante Beiträge...