HTML: Countdown erstellen – So gehts


Ein Countdown kann eine praktische Funktion sein, um einen bestimmten Zeitraum zu überwachen oder auf ein bestimmtes Ereignis hinzuweisen. In diesem Artikel werde ich dir Schritt für Schritt erklären, wie du einen einfachen Countdown mit Hilfe von HTML erstellen kannst.

Schritt 1: Erstelle das HTML-Grundgerüst
Öffne deinen bevorzugten Texteditor und erstelle ein neues HTML-Dokument. Beginne mit dem Erstellen des Grundgerüsts, indem du den Dokumenttyp und das Öffnungs- und Schließtag für das HTML-Element hinzufügst. Füge auch den Head-Bereich hinzu, in dem du den Titel deiner Seite festlegst.

<!DOCTYPE html>
<html>
<head>
<title>Countdown Beispiel</title>
</head>
<body>
</body>
</html>

Schritt 2: Erstelle ein Div-Element für den Countdown
Innerhalb des Body-Tags kannst du jetzt ein Div-Element erstellen, in dem der Countdown angezeigt wird. Füge diesem Div-Element eine ID hinzu, damit wir es später mithilfe von JavaScript ansprechen können.

<!DOCTYPE html>
<html>
<head>
<title>Countdown Beispiel</title>
</hea20
<body>
<div id="countdown"></div>
</body>
</html>

Schritt 3: Füge JavaScript-Code hinzu
Damit wir den Countdown in Echtzeit aktualisieren können, müssen wir JavaScript verwenden. Erstelle ein Skript-Element innerhalb des Head- oder Body-Bereichs deines HTML-Dokuments und schreibe den folgenden JavaScript-Code:

<!DOCTYPE html>
<html>
<head>
<title>Countdown Beispiel</title>
</head>
<body>
<div id="countdown"></div>

<script>
// Definiere das Enddatum und die Uhrzeit für den Countdown
var countDownDate = new Date("Dec 31, 2022 23:59:59").getTime();

// Aktualisiere den Countdown jede Sekunde
var countdownfunction = setInterval(function() {

  // Erhalte das aktuelle Datum und die aktuelle Uhrzeit
  var now = new Date().getTime();

  // Finde den Abstand zwischen dem aktuellen Datum und der Uhrzeit und dem Enddatum und der Uhrzeit
  var distance = countDownDate - now;

  // Berechne die Tage, Stunden, Minuten und Sekunden
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);

  // Gib den Countdown in das Div-Element mit der ID "countdown" aus
  document.getElementById("countdown").innerHTML = days + " Tage " + hours + " Stunden "
  + minutes + " Minuten " + seconds + " Sekunden ";

  // Wenn der Countdown abgelaufen ist, zeige eine Nachricht an
  if (distance < 0) {
    clearInterval(countdownfunction);
    document.getElementById("countdown").innerHTML = "Countdown abgelaufen!";
  }
}, 1000);
</script>

</body>
</html>

Schritt 4: Definiere das Enddatum und die Uhrzeit des Countdowns
Im obigen Beispiel ist das Enddatum auf den 31. Dezember 2022 um 23:59:59 Uhr festgelegt. Du kannst dies nach Bedarf anpassen, indem du das countDownDate-Objekt entsprechend aktualisierst.

Schritt 5: Stilisiere den Countdown
Du kannst den Countdown nach deinen Wünschen mit CSS formatieren, um das Erscheinungsbild an deine Website anzupassen. Verwende einfach die ID des Div-Elements („countdown“) und gestalte es mit CSS-Regeln.

Ergebins

Countdown Beispiel

Das war's! Mit diesen Schritten kannst du einen einfachen Countdown in deiner HTML-Seite erstellen. Experimentiere mit verschiedenen Anpassungen, um den Countdown an deine Bedürfnisse anzupassen. Viel Spaß beim Codieren!

Hat dir der Beitrag gefallen?

    html countdown   
Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors
smileys

Beiträge die dich Interessieren könnten 😌

Whatsapp: Ton für Mitteilungen ändern – So gehts

Der Standard-Ton für Mitteilungen kann mit der Zeit jedoch etwas langweilig werden. Wenn du also...

Whatsapp: Verknüpfte Geräte löschen – So gehts

Oftmals haben wir jedoch mehr als ein Gerät, das mit WhatsApp verbunden ist. Vielleicht hast...

Whatsapp: Telefonnummer ändern – So gehts

Sei es aufgrund eines Anbieterwechsels oder einfach nur aus privaten Gründen. Wenn du dich fragst...

Whatsapp: Nachricht löschen – So gehts

Manchmal kann es jedoch vorkommen, dass wir eine Nachricht versehentlich senden oder dass wir eine...

Whatsapp: Zuletzt verwendete Smileys löschen

Beim Verfassen von Nachrichten verwenden wir oft Emojis oder Smileys, um unsere Gefühle auszudrücken. Manchmal...

Whatsapp: Chat exportieren – So gehts

Manchmal möchten wir jedoch wichtige Chats speichern oder sichern, sei es aus sentimentalen Gründen oder...

Whatsapp: Umfrage erstellen – So gehts

Eine tolle Möglichkeit, um schnell und einfach eine Meinungsumfrage unter deinen Kontakten zu starten, ist...

Telegram: Nutzer melden – So gehts

Es ist wichtig, solche Vorfälle zu melden, um eine angenehme und respektvolle Umgebung für alle...

Telegram: Keine Benachrichtigungen – iPhone

Es kann frustrierend sein, wenn du keine Telegram-Benachrichtigungen auf deinem iPhone erhältst. Glücklicherweise gibt es...

Telegram: Bedienungsanleitung – So gehts

In diesem Beitrag werde ich dir eine Schritt-für-Schritt-Anleitung geben, wie du die Telegram Bedienungsanleitung finden...

Telegram: Gruppe erstellen – So gehts

Das Erstellen einer Gruppe in Telegram kann sehr nützlich sein, wenn du mit einer größeren...

Telegram: Zugriff auf Kamera erlauben

Wenn du in Telegram den Zugriff auf deine Kamera erlauben möchtest, kannst du ganz einfach...

Telegram: Sticker erstellen – So gehts

Mit Telegramm, kannst du sogar deine eigenen individuellen Sticker erstellen. In dieser Schritt-für-Schritt Anleitung zeige...

Telegram: Zugriff auf Fotos erlauben – So gehts

Um in Telegramm den Zugriff auf Fotos zu erlauben, gibt es eine einfache Schritt-für-Schritt Anleitung...

Telegram: Zugriff auf Kontakte verweigern

Obwohl es viele Funktionen bietet, möchten einige Benutzer möglicherweise den Zugriff auf ihre Kontakte in...