Countdown-Widget-Generator
Erstellen Sie schöne Countdown-Timer für Ihre Website. Passen Sie Farben, Größe und Ablaufverhalten an.
Dieser Countdown-Widget-Generator erzeugt ein einziges <script>-Tag, das dort einen laufenden Countdown zeichnet, wo Sie es einfügen. Stellen Sie Target Date & Time, Farben, Größe und die Kästchen Days, Hours, Minutes und Seconds ein – der Bereich Einbettungscode schreibt sich beim Tippen neu. Nur geänderte Einstellungen werden ausgegeben, ein Countdown mit lauter Voreinstellungen ist also eine Zeile: die Skriptquelle plus data-date.
Anpassen
Voreinstellungen
Live-Vorschau
Einbettungscode
Beliebte Werkzeuge
Über Countdown-Widget-Generator
Die Ausgabe ist ein Skript-Tag, das countdown.min.js von dieser Site lädt und Ihre Einstellungen als data-Attribute mitführt. Führt die Seite es aus, setzt das Skript den Countdown unmittelbar hinter das Tag selbst; die Position des Schnipsels in Ihrem HTML ist also die Position des Widgets. Von dieser Seite wird nichts hochgeladen: Der Code entsteht im Browser, und die Vorschau darüber tickt im Sekundentakt, sodass Sie vor dem Kopieren das echte Ergebnis sehen.
Jedes Bedienelement steht für ein Attribut, und nur abweichende Werte werden ausgegeben. Target Date & Time wird zu data-date, Title zu data-title, die drei Farbfelder zu data-bg, data-color und data-accent, die Größe zu data-size, und die vier Einheitenkästchen werden abgewählt zu data-show-days, data-show-hours, data-show-minutes und data-show-seconds. Der Trenner schreibt data-separator; Beschriftungen anzeigen und Branding anzeigen schreiben abgeschaltet data-labels="false" und data-branding="false". On Expiry wählt zwischen Ihrer Ablaufmeldung, einer Weiterleitung und dem Ausblenden des Widgets.
Zwei Verhaltensweisen sollte man vor der Veröffentlichung kennen. Das Datumsfeld führt keine Zeitzone, und das Widget übergibt die Zeichenkette unverändert dem Date-Konstruktor des Browsers, der eine Datums-Zeit-Angabe ohne Versatz als Ortszeit liest; der Countdown endet also zur jeweils gleichen Uhrzeit in der Zone des Besuchers, nicht zu einem weltweit gleichen Zeitpunkt. Zudem sind die Einheitenbeschriftungen im Widget feste englische Wörter – Days, Hours, Minutes, Seconds –, nehmen Sie auf einer nicht englischen Site also den Haken bei Beschriftungen anzeigen weg und schreiben Sie Ihre Formulierung in Title.
Die sechs Voreinstellungen ändern nur die drei Farben: Dark ist #1f2937 mit Weiß und dem Akzent #60a5fa, Light ist #f9fafb mit der Textfarbe #111827 und dem Akzent #2563eb, Neon, Fire, Ocean und Minimal folgen demselben Muster. Bleibt Branding anzeigen an, erscheint unter der Uhr ein kleiner Link zurück auf diese Seite. Das Widget braucht JavaScript und Zugriff auf diese Site, um das Skript zu laden, es erscheint also weder in einer E-Mail noch in einem Feedreader.
Anwendungsfälle
Anleitung
Stellen Sie Target Date & Time auf den Moment ein, an dem der Countdown null erreichen soll; das Feld ist auf Mitternacht in sieben Tagen vorbelegt.
Tragen Sie einen Title ein, wenn Sie eine Zeile über den Ziffern wollen, und setzen Sie Background, Text Color und Accent Color, oder drücken Sie eine der Voreinstellungen Dark, Light, Neon, Fire, Ocean und Minimal.
Wählen Sie die Größe, einen Trenner und nehmen Sie die Haken bei nicht benötigten Einheiten Days, Hours, Minutes und Seconds weg, ebenso bei Beschriftungen anzeigen und Branding anzeigen.
Wählen Sie On Expiry: Show Message mit eigener Expiry Message, Redirect URL mit vollständiger Adresse oder Hide Widget.
Prüfen Sie die Live-Vorschau, die im Sekundentakt tickt und genau die Farben und Einheiten Ihrer Einstellungen zeigt.
Drücken Sie im Bereich Einbettungscode auf Kopieren und fügen Sie das Skript-Tag dort in Ihre Seite ein, wo der Countdown erscheinen soll.
Profi-Tipps
- Ändern Sie eine Einstellung, erscheint sie im Code; lassen Sie sie, erscheint sie nicht. Wirkt Ihr Schnipsel verdächtig kurz, liegt es daran: Jedes fehlende Attribut steht auf seinem Standardwert, und es von Hand zu ergänzen ändert nichts.
- Target Date & Time trägt keine Zeitzone. Das Widget gibt die Zeichenkette an den Date-Konstruktor des Browsers, der sie als Ortszeit liest: Ein Stichtag um 23:59 endet bei jedem Besucher um 23:59. Schreiben Sie die Zone in Title, wenn das zählt.
- Die Beschriftungen Days, Hours, Minutes und Seconds im Widget sind festes Englisch. Nehmen Sie auf einer anderssprachigen Site den Haken bei Beschriftungen anzeigen weg und tragen Sie die Bedeutung in Title, sonst mischt die Uhr zwei Sprachen.
- Der Countdown erscheint genau dort, wo das Skript-Tag steht, weil das Skript ihn als eigenes nächstes Geschwisterelement einfügt. Fügen Sie das Tag in den gewünschten Container ein, nicht in den head.
- Redirect URL greift nur bei einer Adresse, die mit http://, https:// oder einem Schrägstrich beginnt. Eine bloße Domain ohne Schema wird ignoriert, und das Widget tut bei null nichts.
Fehlerbehebung
Nach dem Einfügen des Codes erscheint auf meiner Seite nichts.
Drei übliche Ursachen: Die Plattform hat das Skript-Tag entfernt, JavaScript ist abgeschaltet, oder der Browser konnte countdown.min.js nicht von dieser Site laden. Prüfen Sie den Quelltext auf das Tag und sehen Sie in der Browserkonsole nach einer blockierten oder gescheiterten Anfrage für diese Datei.
Der Countdown endet für Besucher im Ausland zur falschen Zeit.
Das ist so gebaut. Das Datum trägt keine Zeitzone und das Widget liest es als Ortszeit, es endet also in jeder Zone zur gleichen Uhrzeit. Sollen alle es gemeinsam enden sehen, nennen Sie die Zone im Title, damit Lesende umrechnen können.
Die Ziffern sind mit Days und Hours beschriftet, meine Site ist aber nicht englisch.
Die Einheitenbeschriftungen im Widget sind feste englische Wörter und lassen sich von dieser Seite aus nicht übersetzen. Nehmen Sie den Haken bei Beschriftungen anzeigen weg und tragen Sie die gewünschte Formulierung in Title, der Ihr eigener Text ist.
Redirect URL bewirkt bei null nichts.
Das Widget folgt nur einer Adresse, die mit http://, https:// oder einem Schrägstrich beginnt, und On Expiry muss ebenfalls auf Redirect URL stehen. Tippen Sie die Adresse mit Schema neu und prüfen Sie, ob der Code data-expiry und data-expiry-url enthält.
Häufig gestellte Fragen
Stellen Sie Target Date & Time ein, wählen Sie Farben und die anzuzeigenden Einheiten, drücken Sie im Bereich Einbettungscode auf Kopieren und fügen Sie das einzeilige Skript-Tag dort in das HTML Ihrer Seite ein, wo die Uhr stehen soll. Nichts zu installieren, kein Konto: Das Widget ist ein kleines von dieser Site gehostetes Skript, Ihre Einstellungen reisen im Tag mit.
Ja. Keine Registrierung, kein Schlüssel, keine Bezahlstufe, und das erzeugte Tag läuft auf jeder Site, in die sich HTML einfügen lässt. Branding anzeigen setzt einen kleinen Link zurück auf diese Seite unter die Uhr; abgeschaltet verschwindet der Link, und das Widget arbeitet genauso weiter.
Unmittelbar hinter dem Skript-Tag. Das Widget-Skript fügt seinen eigenen Container als nächstes Geschwisterelement des Tags ein, die Position des Schnipsels im HTML ist also die Position des Widgets. Setzen Sie das Tag in den Abschnitt, die Spalte oder das Banner Ihrer Wahl, niemals in den head.
Das Widget ist HTML und JavaScript, es erscheint also im mobilen Browser jedes Telefons, das Ihre Seite besucht, und der Kasten bricht seine Einheiten auf schmalen Schirmen um. Ein Startbildschirm-Widget für Android oder iOS ist es nicht – solche Widgets baut das Betriebssystem, sie lassen sich nicht von einer Webseite erzeugen.
Das, was On Expiry sagt. Show Message ersetzt die Ziffern durch den Text aus Expiry Message, der anfangs „Time's up!“ lautet. Redirect URL schickt Besucher an die angegebene Adresse, sofern sie mit http://, https:// oder einem Schrägstrich beginnt. Hide Widget entfernt den ganzen Kasten von der Seite.
Die des Besuchers. Das Datumsfeld führt keine Zone, und das Widget übergibt die Zeichenkette dem Date-Konstruktor des Browsers, der eine Datums-Zeit-Angabe ohne Versatz als Ortszeit behandelt. Ein Stichtag um 20:00 endet daher in Berlin um 20:00 und in New York um 20:00, sechs Stunden auseinander.
Ja, über drei Felder: Background, Text Color und Accent Color, jedes mit Farbfeld und Hex-Eingabe. Der Akzent färbt die Ziffern. Sechs Voreinstellungen setzen alle drei auf einmal – Dark, Light, Neon, Fire, Ocean und Minimal – und Sie können von einer starten und danach ein einzelnes Feld ändern.
Nein. Der Generator liefert nur die Skriptfassung, weil ein Countdown sich jede Sekunde aktualisieren muss und das JavaScript verlangt. Blockiert Ihre Plattform externe Skripte, suchen Sie einen Block für eigenes HTML, der sie zulässt, oder hosten Sie den Countdown auf einer Seite, die Ihnen gehört.
Weil das Zieldatum wirklich so weit weg ist – der Tageswert ist nicht gedeckelt. Prüfen Sie Target Date & Time; ein Tippfehler in der Jahreszahl ist die übliche Ursache. Ist der lange Horizont gewollt, nehmen Sie die Haken bei Seconds und Minutes weg, damit nur sichtbar wechselnde Einheiten bleiben.
Nein. E-Mail-Programme und Feedreader entfernen Skripte, das Tag tut dort also nichts. Countdowns in E-Mails sind üblicherweise animierte Bilder, die ein Server bei jedem Öffnen erzeugt; dieses Widget ist ein Browserskript und braucht eine echte Seite und Zugriff auf diese Site.