Countdown-Timer-Generator: kostenloser HTML- und React-Code, ohne Anmeldung | We.Inc
Erstelle einen Countdown-Timer für deine Website. Lege Datum und Zeitzone fest, wähle einen Stil und kopiere reines HTML oder eine React-Komponente. Ohne Konto, ohne Tracking-Widget, ohne externes Skript.
Ein Website-Countdown vergleicht einmal pro Sekunde eine feste Deadline mit der Uhr des Besuchers und zeigt die verbleibenden Tage, Stunden, Minuten und Sekunden an. Lege unten Datum, Uhrzeit und Zeitzone fest, wähle einen Stil und kopiere eigenständiges HTML oder eine React-Komponente. Der Code läuft auf deiner Seite, ohne Skript von Drittanbietern und ohne Konto.
Zwei Arten von Countdowns
Art
Deadline
Geeignet für
Festes Datum
Derselbe Zeitpunkt für alle
Launches, Events und Aktionen, die zu einem echten Zeitpunkt enden
Pro Besucher
Eine festgelegte Anzahl Stunden nach dem ersten Besuch jedes Besuchers
Willkommensangebote, die für diese Person tatsächlich ablaufen
Wähle ein Datum und die Zeitzone, zu der die Deadline gehört, entscheide dich für einen von drei Stilen und eine Akzentfarbe und sieh dir unten das Live-Ergebnis an. Ausgegeben wird ein Block aus HTML, CSS und JavaScript oder eine React-Komponente mit Tailwind-Klassen.
Wähle Datum und Uhrzeit der Deadline und dann die Zeitzone, in der sie liegt. Der Code speichert den exakten Zeitpunkt in UTC, sodass Besucher in anderen Zonen die richtige Restzeit sehen.
Oder wechsle zu einem Countdown pro Besucher und gib ein, wie viele Stunden jeder Besucher bekommt.
Wähle Stil und Akzentfarbe und bearbeite die Überschrift sowie die Nachricht, die nach Ablauf der Zeit erscheint.
Kopiere das HTML-Embed oder die React-Komponente und füge sie dort ein, wo der Timer erscheinen soll.
Zeige einen Countdown nur für eine echte Deadline. Timer, die sich zurücksetzen oder nie enden, täuschen Besucher, und die US Federal Trade Commission zählt gefälschte Countdowns zu den irreführenden Designpraktiken.
Sag in der Abschlussnachricht, was bei null passiert, zum Beispiel dass die Aktion vorbei ist oder das Event begonnen hat, mit einem Link zum nächsten Schritt.
Der Timer nutzt die Geräteuhr des Besuchers. Geht diese falsch, stimmt auch der Countdown nicht. Verlass dich deshalb nie allein darauf, wenn es um eine echte Frist geht; setze Deadlines auch auf deinem Server durch.
Halte Screenreader aus den sekündlichen Updates heraus. Der Code kennzeichnet den Timer mit role timer und aria-live off, damit nicht jeder Tick angesagt wird.
Häufige Fragen
Wie füge ich meiner Website einen Countdown-Timer hinzu?
Kopiere das HTML-Embed und füge es an der Stelle deiner Seite ein, an der der Timer erscheinen soll. Die meisten Website-Baukästen haben dafür einen HTML- oder Embed-Block. Ist deine Website mit React gebaut, kopiere stattdessen die Komponente und rendere sie wie jede andere Komponente.
Stimmt der Timer auch für Besucher in anderen Zeitzonen?
Ja. Das Tool wandelt dein Datum und deine Zeitzone in einen exakten Zeitpunkt in UTC um und schreibt diese Zahl in den Code. Der Browser jedes Besuchers zählt bis zu demselben Zeitpunkt herunter, unabhängig von seiner Ortszeit.
Was bewirkt die Option pro Besucher?
Sie startet den Countdown jedes Besuchers bei seinem ersten Besuch und speichert diesen Zeitpunkt in seinem Browser, sodass ein Neuladen ihn nicht neu startet. Wer Websitedaten löscht oder das Gerät wechselt, bekommt einen neuen Countdown. Nutze die Option daher nur für Angebote, die du auch in diesem Fall gern einlöst.
Kann ich diesen Countdown in eine E-Mail einbauen?
Nein. E-Mail-Programme führen kein JavaScript aus. Countdowns in E-Mails sind animierte Bilder, die ein Server beim Öffnen der E-Mail erzeugt, und das kann eine statische Seite nicht leisten.
Warum der Code UTC speichert
Ein Datum wie 1. Dezember um 9:00 bezeichnet in Toronto und in Karachi unterschiedliche Zeitpunkte. Wird die Deadline als UTC-Timestamp gespeichert, fällt diese Mehrdeutigkeit weg, und auch Zeitumstellungen werden berücksichtigt, da die Umrechnung die Regeln der gewählten Zone für genau dieses Datum verwendet.
Das Skript zieht dann bei jedem Tick die aktuelle Zeit von der Deadline ab und zerlegt die Differenz in Tage, Stunden, Minuten und Sekunden.
Den Timer genau und schlank halten
Browser verlangsamen Timer in Hintergrund-Tabs, daher driftet ein Countdown, der pro Tick einfach eine Sekunde abzieht. Dieser Code rechnet jedes Mal neu von der Uhr aus und plant das nächste Update für den Beginn der nächsten Sekunde, sodass er korrekt bleibt, wenn der Tab wieder aktiv wird.
Es gibt keine Bibliothek und keine externe Anfrage. Das hält die Seite schnell und verhindert, dass Besucherdaten an einen Widget-Anbieter gesendet werden.