veröffentlicht am: 27. Oktober 2023
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
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?
Hi ich bin’s Dominik. Auf Blogseite.com findest du alles was mich interessiert. Mag Games, liebe SEO, programmiere gerne und möchte dir mit verschiedenen Themen die mich begeistern einen Mehrwert liefern. Viel Spaß auf meiner Seite
Whatsapp: Ton für Mitteilungen ändern – So gehts
Whatsapp: Verknüpfte Geräte löschen – So gehts
Whatsapp: Telefonnummer ändern – So gehts
Whatsapp: Nachricht löschen – So gehts
Whatsapp: Zuletzt verwendete Smileys löschen
Whatsapp: Chat exportieren – So gehts
Whatsapp: Umfrage erstellen – So gehts
Telegram: Nutzer melden – So gehts
Telegram: Keine Benachrichtigungen – iPhone
Telegram: Bedienungsanleitung – So gehts
Telegram: Gruppe erstellen – So gehts
Telegram: Zugriff auf Kamera erlauben
Telegram: Sticker erstellen – So gehts
Telegram: Zugriff auf Fotos erlauben – So gehts