# Countdown-Banner-Generator Erzeugt ein Echtzeit-Countdown-Banner (HTML+JS, ohne Abhängigkeiten) zum Einbetten auf jeder Seite. Themen, lokalisierte Texte, einmalig oder wöchentlich wiederkehrend, Wechsel zu „beendet“. > Kanonische Seite: https://elysiatools.com/de/tools/live-countdown-banner-generator - **Kategorie:** Generator - **Schlagwörter:** countdown, countdown-banner, timer, produktstart, ereignis ## Überblick Ein eigenständiges, abhängigkeitsfreies Countdown-Banner, das man in jede HTML-Seite, E-Mail-Markdown oder statische Seite einfügen kann. \*\*Wie.\*\* Man gibt einen Zielzeitpunkt (Datum + Uhrzeit + Zeitzone) an. Der Generator gibt einen \` \`-Block mit Inline-CSS und einem kleinen reinen JS-Timer aus, der jeden Tag/Stunde/Minute/Sekunde neu berechnet. Kein iframe, keine externen Requests, kein Build. \*\*Modi.\*\* - \*\*Einmalig\*\* — zählt bis zum Ziel, friert bei Null ein und tauscht das Label gegen die Abgelaufen-Meldung. - \*\*Wiederkehrend (wöchentlich)\*\* — nach dem Ziel werden 7-Tage-Schritte addiert, bis das nächste Future-Datum erreicht ist. \*\*Themes.\*\* Fünf eingebaute (Lila-Verlauf, Sonnenuntergang, Blau, Hell-Minimal, Dunkel). \*\*Lokalisierung.\*\* Die Labels (Tage/Stunden/Minuten/Sekunden/Beendet) werden in der gewählten Sprache in den Snippet integriert. ## Eingaben - **Zieldatum und -uhrzeit** (text): e.g. 2026-12-31T23:59 - **Zeitzone** (text): e.g. America/New_York (default: UTC) - **Titel / Label** (text): e.g. Product launch in - **Abgelaufen-Meldung** (text): e.g. The event has started! - **Theme** (select) - **Modus** (select) - **Sprache** (select) - **Sekunden anzeigen** (checkbox) ## Wann verwenden - Wenn Sie einen zeitlich begrenzten Produktstart oder Sale auf einer statischen Landingpage ankündigen möchten. - Für wöchentlich wiederkehrende Events wie Livestreams oder Webinare, ohne den Code jedes Mal manuell aktualisieren zu müssen. - Wenn Sie einen leichtgewichtigen Timer ohne externe Abhängigkeiten, Frameworks oder iFrames direkt in Ihr HTML einbinden wollen. ## Funktionsweise - Geben Sie das Zieldatum, die Uhrzeit und die gewünschte Zeitzone für das Ereignis ein. - Wählen Sie den Modus (einmalig oder wöchentlich wiederkehrend), das Design-Theme und die Sprache für die Beschriftungen aus. - Kopieren Sie den generierten HTML-Code, der das Inline-CSS und das schlanke Vanilla-JS-Skript enthält, und fügen Sie ihn an der gewünschten Stelle in Ihre Webseite ein. ## Anwendungsfälle - Einbindung eines Timers auf einer Landingpage für den Launch eines neuen Software-Produkts. - Anzeige eines wöchentlich wiederkehrenden Countdowns für einen regelmäßigen Community-Livestream. - Platzierung eines auffälligen Banners auf einer E-Commerce-Seite für das Ende einer Rabattaktion. ## Häufig gestellte Fragen ### Benötigt das Banner externe Bibliotheken wie jQuery? Nein, das generierte Banner verwendet reines HTML, Inline-CSS und Vanilla-JS ohne externe Abhängigkeiten. ### Wie funktioniert der wöchentlich wiederkehrende Modus? Nach Ablauf des Zieldatums addiert das Skript automatisch 7 Tage hinzu, um den Timer für die nächste Woche zurückzusetzen. ### Kann ich das Banner in E-Mails verwenden? Das HTML-Layout und CSS funktionieren in den meisten E-Mail-Clients, aber das interaktive JavaScript läuft nur in Web-Browsern. ### Was passiert, wenn der Countdown abgelaufen ist? Der Timer stoppt bei Null und zeigt optional eine von Ihnen definierte Abgelaufen-Meldung an. ### Unterstützt das Banner verschiedene Zeitzonen? Ja, Sie können eine beliebige Zeitzone (z. B. Europe/Berlin oder UTC) angeben, damit der Countdown für alle Nutzer synchron läuft. ## Ähnliche Tools - [E-Mail-Signatur-HTML-Generator](https://elysiatools.com/de/tools/email-signature-html-builder): Erzeugt eine saubere, kopierfertige HTML-E-Mail-Signatur, die in Gmail, Outlook und Apple Mail korrekt dargestellt wird — mit Avatar/Logo, Social Icons (automatisch aus Ihren Links erkannt), Akzentfarbe, Hell/Dunkel/Auto-Theme und einem tabellenbasierten, E-Mail-sicheren Layout mit Inline-Styles. HTML kopieren und direkt in den Mail-Client einfügen. - [PDF-Bild- und Caption-Extraktor](https://elysiatools.com/de/tools/pdf-image-caption-extractor): Extrahiert PDF-Bilder, ordnet nahe Captions zu und erstellt einen durchsuchbaren HTML-Index - [SVG-Sprite-Sheet-Generator](https://elysiatools.com/de/tools/svg-sprite-generator): Lade bis zu 30 SVG-Icons hoch und füge sie zu einem Sprite-Sheet zusammen: \-Modus für inline , \-Modus für externe Datei-Fragmente. Ergänzt viewBox (aus width/height), dedupliziert Icons, entfernt optional fill/stroke für currentColor, säubert immer und on\*-Attribute und erzeugt HTML-/React-/Vue-/CSS-Snippets mit Live-Vorschau jedes Icons. - [Accessibility-Heatmap-Generator](https://elysiatools.com/de/tools/accessibility-heatmap-generator): Erzeugt eine kontrastfokussierte Accessibility-Heatmap aus Screenshot oder HTML und schlaegt Patch-Farben vor - [API Doku Generator](https://elysiatools.com/de/tools/api-doc-generator): Erstellt ansprechende API Dokumentation aus OpenAPI oder kommentiertem Quelltext - [Data-URI-Generator](https://elysiatools.com/de/tools/data-uri-generator): Konvertiert Dateien in Data URIs (Base64 oder prozent-kodiert), um Bilder, Schriftarten und Ressourcen direkt in HTML, CSS oder Markdown einzubetten - [PDF-Rechnungsgenerator](https://elysiatools.com/de/tools/pdf-invoice-generator): Erstellt eine gebrandete PDF-Rechnung aus strukturierten Positionen - [AsciiMath-/LaTeX-/MathML-Formelkonverter](https://elysiatools.com/de/tools/asciimath-latex-mathml-equation-converter): Wandelt Formeln zwischen AsciiMath, LaTeX und MathML um: erkennt das Eingabeformat und erzeugt kanonisches LaTeX, annotiertes Presentation-MathML, eine best-effort-AsciiMath-Rückübersetzung, ein aria-label-Snippet für Screenreader sowie eine KaTeX-Vorschau. ## Beispiele - [Web Python Bildverarbeitung Beispiele](https://elysiatools.com/de/samples/web-image-processing-python): Web Python Bildverarbeitungsbeispiele mit PIL/Pillow einschließlich Lesen, Speichern, Skalieren und Formatkonvertierung - [Android Java Bildverarbeitungsbeispiele](https://elysiatools.com/de/samples/android-image-processing-java): Android Java Bildverarbeitungsbeispiele einschließlich Lesen/Schreiben, Skalierung und Formatkonvertierung - [Android Kotlin Bildverarbeitungsbeispiele](https://elysiatools.com/de/samples/android-image-processing-kotlin): Android Kotlin Bildverarbeitungsbeispiele einschließlich Lesen/Schreiben, Skalierung und Formatkonvertierung - [Web Rust Bildverarbeitungsbeispiele](https://elysiatools.com/de/samples/web-image-processing-rust): Web Rust Bildverarbeitungsbeispiele einschließlich Lesen/Schreiben, Skalierung und Formatkonvertierung