Countdown-Timer in JavaScript

Legen Sie das HTML-Tag für den Timer fest

Im obigen Code enthält das Tag <h1> die Timer-Anzeige. Verwenden Sie diesen Code in Ihrem Webseiten-HTML. Die Option id="count-down-timer" ist erforderlich, wenn auf das Element in JavaScript mit der ID count-down-timer zugegriffen wird, um den Elementtext zur Laufzeit dynamisch zu ändern.

<h1 class="text-center" id="count-down-timer"></h1>

Stellen Sie den Timer-Wert ein

Sobald das Tag angebracht ist, besteht der nächste Schritt darin, den Wert für die Zählzeit festzulegen. Normalerweise verwenden Webseiten eine fest codierte Zeit, die in ihren Code integriert ist und nicht anpassbar ist. Sie können den Timer in der Methode window.onload in time_minutes und time_seconds einstellen. Wenn Sie beispielsweise einen Timer für eineinhalb Minuten einstellen möchten, stellen Sie den Code wie folgt ein:

let time_minutes = 1;   // Value in minutes
let time_seconds = 30;  // Value in seconds

Wenn Sie 3 Minuten einstellen möchten, setzen Sie time_minutes = 3 und belassen Sie time_seconds = 0. Sobald Sie Ihren Code ausgeführt oder Ihren HTML-Code neu geladen haben, können Sie die aktualisierte Ausgabe erhalten.

Die Ausführung beginnt mit der Funktion window.onload. Es nimmt den von Ihnen eingestellten Timer-Wert und berechnet die Gesamtdauer in Sekunden.

let time_minutes = 1;   // Value in minutes
let time_seconds = 30;  // Value in seconds

let duration = time_minutes * 60 + time_seconds;

document.querySelector('#count-down-timer') ruft den HTML-Knoten des Elements ab. Dieser Knoten wird verwendet, um den Timer-Wert zu aktualisieren.

element = document.querySelector('#count-down-timer');

Sobald das Element verfügbar ist, wird es mit dem von uns festgelegten Wert initialisiert. Im Code sind es beispielsweise 1 Minute und 30 Sekunden. Es ist in einem aufgefüllten Format eingestellt.

function paddedFormat(num) {
  return num < 10 ? '0' + num : num;
}

console.log(paddedFormat(3));
console.log(paddedFormat(12));

Ausgabe:

03
12

Die Funktion paddedFormat(num) gibt die aufgefüllte Nummer zurück. Für Minuten und Sekunden werden die einstelligen Werte aufgefüllt, indem ihnen eine 0 vorangestellt wird. Beispielsweise werden 2 Minuten und 5 Sekunden als 02 bzw. 05 aufgefüllt.

element.textContent =
    `${paddedFormat(time_minutes)}:${paddedFormat(time_seconds)}`;

Als nächstes rufen wir die Funktion startCountDown(--duration, element) auf, die duration in Sekunden übergibt, und den HTML-Knoten des Anzeigeelements. Wir haben jetzt den Wert 01:30 angezeigt. Daher brauchen wir den Timer, um von 01:29 zu starten. Aus diesem Grund verwenden wir den unären Dekrementierungsoperator mit der Dauer --duration.

startCountDown(--duration, element);

startCountDown(duration, element) ist das Herzstück des Timers. In diesem Fall verwenden wir die Funktion setInterval(function(){}, 1000) von JavaScript, um den Timer nach jeder Sekunde (1000 Millisekunden) auszuführen, bis er mit clearInterval(countInterval) gelöscht oder beendet wird.

function startCountDown(duration, element) {
  let secondsRemaining = duration;
  let min = 0;
  let sec = 0;

  let countInterval = setInterval(function() {
    min = parseInt(secondsRemaining / 60);
    sec = parseInt(secondsRemaining % 60);

    element.textContent = `${paddedFormat(min)}:${paddedFormat(sec)}`;

    secondsRemaining = secondsRemaining - 1;
    if (secondsRemaining < 0) {
      clearInterval(countInterval)
    };
  }, 1000);
}

In der Funktion setinterval() werden die Minuten und Sekunden für die Anzeige berechnet. Die Minuten werden berechnet, indem der Wert remainingSeconds durch 60 geteilt wird, um den Minutenwert zu erhalten, und sein ganzzahliger Teil genommen wird.

let secondsRemaining = 89;
let min = parseInt(secondsRemaining / 60);
let sec = parseInt(secondsRemaining % 60);

console.log(secondsRemaining + 'seconds');
console.log(min);
console.log(sec);

Ausgabe:

89  // Equivalent to 1 min and 29 seconds
1
29

Als Nächstes zeigen wir die auf der Webseite berechneten Minuten und Sekunden an, indem wir den Text mit dem Attribut textContent des HTML-Knotenelements festlegen.

element.textContent = `${paddedFormat(min)}:${paddedFormat(sec)}`;

Als nächstes reduziert sich der Wert für die secondsRemaining und die Timer-Funktionalität wird jede Sekunde mit der Methode setInterval() ausgeführt.

Sobald der Wert für secondsRemaining 0 ist, wird das clearInterval(countInterval) ausgelöst, um den Timer zu stoppen. Außerdem wird sichergestellt, dass der Timer nicht neu gestartet wird oder Minuswerte aufweist.