suchen

Heim >Web-Frontend >js-Tutorial >Wie erstelle ich einen einfachen Countdown-Timer nur mit JavaScript?

Wie erstelle ich einen einfachen Countdown-Timer nur mit JavaScript?

Mary-Kate Olsen
Mary-Kate OlsenOriginal
2024-12-03 22:31:16583Durchsuche

How to Create a Simple Countdown Timer Using Only JavaScript?

Erstellen eines einfachen Countdown-Timers in JavaScript

Wenn Sie einen unkomplizierten Countdown-Timer für Ihre Website einrichten möchten, einen, der elegant von „05:00“ zu „ 00:00“, suchen Sie nicht weiter. Dieser Artikel bietet eine optimierte Lösung, die auf komplexe Datumsobjekte verzichtet und größtmögliche Einfachheit gewährleistet.

Nur ​​JavaScript-Timer

function startTimer(duration, display) {
  var timer = duration, minutes, seconds;
  setInterval(function () {
    minutes = parseInt(timer / 60, 10);
    seconds = parseInt(timer % 60, 10);

    minutes = minutes < 10 ? "0" + minutes : minutes;
    seconds = seconds < 10 ? "0" + seconds : seconds;

    display.textContent = minutes + ":" + seconds;

    if (--timer < 0) {
      timer = duration;
    }
  }, 1000);
}

window.onload = function () {
  var fiveMinutes = 60 * 5,
    display = document.querySelector('#time');
  startTimer(fiveMinutes, display);
};

HTML-Struktur:

<body>
  <div>Registration closes in <span>

Das obige ist der detaillierte Inhalt vonWie erstelle ich einen einfachen Countdown-Timer nur mit JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript for date using this
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Warum ist „message.content“ in meinem Discord.js-Bot leer und wie kann ich das Problem beheben?Nächster Artikel：Warum ist „message.content“ in meinem Discord.js-Bot leer und wie kann ich das Problem beheben?

In Verbindung stehende Artikel

Mehr sehen