Countdown zur EM, WM oder anderen sportlichen Großereignissen


Ein Countdown zur nächsten Fußball-Europameisterschaft (EM), Fußball-Weltmeisterschaft (WM) oder zu anderen sportlichen Großereignissen ist ein echter Blickfang für Deine Website. Besonders geeignet sind solche Countdowns für Vereinswebseiten, Sportblogs, Fußballportale, Fanpages sowie allgemein für sportaffine Internetprojekte.

Mit einem Sport-Countdown steigerst Du nicht nur die Aufmerksamkeit Deiner Besucher, sondern sorgst auch für regelmäßige Wiederkehr, da wichtige Events klar sichtbar angekündigt werden. Ob EM, WM, Olympische Spiele, Tour de France, Bundesliga-Start oder andere internationale Sportevents – ein Countdown bringt Spannung auf Deine Seite.

Vorteile eines Sport-Countdowns auf Deiner Website

  • Visuelle Hervorhebung wichtiger Sportereignisse
  • Mehr Verweildauer und höhere Nutzerinteraktion
  • Ideal für Desktop- und Mobile-Websites
  • Einfache Integration per HTML, JavaScript oder Plugin
  • Auch optimal für WordPress-Websites geeignet

Sport-Countdown über einen Webdienstleister darstellen

Wir haben hier als Beispiel der Countdown von Webcountdown.de eingebaut – hier lässt sich das Countdown-Datum frei bestimmen. Als Beispiel haben wir einen Countdown zum Jahreswechsel eingebaut. Genauso gut lässt sich aber z.B. der Starttermin der nächsten Olympiade, der nächsten Fußball-WM / EM etc. einbauen:



Sport-Countdown über ein Javascript erstellen (Copy & Past)

Hier ein lauffähiger Sport-Countdown (ohne externe Abhängigkeiten) vorbereitet – als Copy & Paste für WordPress sowie für andere CMS.

Wichtig: Wir haben als Beispiel die Eröffnung der Olympischen Sommerspiele 2028 in Los Angels 14.07.2028 17:00 PT eingebaut. Für andere Events / Zieldaten muss Du das Scirpt entsprechend anpassen.

Variante A: Einfache Einbettung (1 Block, überall lauffähig)

WordPress (Gutenberg / Block Editor)

  1. Seite/Beitrag öffnen
  2. Block „Individuelles HTML“ hinzufügen
  3. Kompletten Code unten einfügen und veröffentlichen

Andere CMS

Den Code in ein HTML-/Code-Element (oder in den Quelltext) einfügen.

Copy & Paste – Komplettcode

<!-- LA28 Sport-Countdown (Sommerspiele 2028 Los Angeles) -->
<div class="la28-countdown" data-la28-title="Countdown bis Los Angeles 2028" aria-live="polite">
  <div class="la28-countdown__header">
    <strong class="la28-countdown__title">Countdown bis zu den Olympischen Sommerspielen 2028 (Los Angeles)</strong>
    <div class="la28-countdown__meta">Eröffnung: 14. Juli 2028, 17:00 Uhr (Pacific Time)</div>
  </div>

  <div class="la28-countdown__grid" role="group" aria-label="Zeit bis zur Eröffnung">
    <div class="la28-countdown__cell"><span class="la28-countdown__num" data-part="days">–</span><span class="la28-countdown__label">Tage</span></div>
    <div class="la28-countdown__cell"><span class="la28-countdown__num" data-part="hours">–</span><span class="la28-countdown__label">Stunden</span></div>
    <div class="la28-countdown__cell"><span class="la28-countdown__num" data-part="minutes">–</span><span class="la28-countdown__label">Minuten</span></div>
    <div class="la28-countdown__cell"><span class="la28-countdown__num" data-part="seconds">–</span><span class="la28-countdown__label">Sekunden</span></div>
  </div>

  <div class="la28-countdown__footer">
    <small>Zeitziel: 14.07.2028 17:00 PT (PDT, UTC−7). Anzeige in Echtzeit.</small>
  </div>
</div>

<style>
  .la28-countdown{
    border:1px solid rgba(0,0,0,.12);
    border-radius:12px;
    padding:16px;
    margin:16px 0;
    background:#fff;
  }
  .la28-countdown__header{ margin-bottom:12px; }
  .la28-countdown__title{ display:block; font-size:1.05rem; line-height:1.35; }
  .la28-countdown__meta{ margin-top:4px; opacity:.8; font-size:.95rem; }

  .la28-countdown__grid{
    display:grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap:10px;
    margin:12px 0 6px;
  }
  .la28-countdown__cell{
    border:1px solid rgba(0,0,0,.10);
    border-radius:10px;
    padding:10px 8px;
    text-align:center;
  }
  .la28-countdown__num{
    display:block;
    font-size:1.6rem;
    font-weight:700;
    letter-spacing:.02em;
  }
  .la28-countdown__label{
    display:block;
    margin-top:2px;
    font-size:.9rem;
    opacity:.8;
  }
  .la28-countdown__footer{
    opacity:.75;
    font-size:.9rem;
  }

  @media (max-width: 640px){
    .la28-countdown__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
</style>

<script>
(function(){
  // Zielzeitpunkt:
  // Offiziell kommuniziert: 14.07.2028, 17:00 PT (Pacific Time). Quelle: LA28.
  // Um Browser/Zeitzonen robust zu halten, rechnen wir in UTC:
  // 17:00 PDT (UTC-7) => 00:00 UTC am 15.07.2028
  //Folgend die Info, wenn die Eröffnungsfeier 2 Stunden später ist - was muss dann geändert werden
  // Wenn Du stattdessen 19:00 PT willst:
  // 19:00 PDT => 02:00 UTC am 15.07.2028
  // Dann ersetze die Zielzeit unten durch: "2028-07-15T02:00:00Z"
  var targetUtcIso = "2028-07-15T00:00:00Z";
  var target = new Date(targetUtcIso).getTime();

  function pad2(n){ return String(n).padStart(2, "0"); }

  function updateOne(root){
    var now = Date.now();
    var diff = target - now;

    var daysEl = root.querySelector('[data-part="days"]');
    var hoursEl = root.querySelector('[data-part="hours"]');
    var minsEl = root.querySelector('[data-part="minutes"]');
    var secsEl = root.querySelector('[data-part="seconds"]');

    if (!daysEl || !hoursEl || !minsEl || !secsEl) return;

    if (diff <= 0){
      daysEl.textContent = "0";
      hoursEl.textContent = "00";
      minsEl.textContent = "00";
      secsEl.textContent = "00";
      var meta = root.querySelector(".la28-countdown__meta");
      if (meta) meta.textContent = "Die Olympischen Sommerspiele 2028 haben begonnen.";
      return;
    }

    var totalSeconds = Math.floor(diff / 1000);
    var days = Math.floor(totalSeconds / 86400);
    var rem = totalSeconds % 86400;
    var hours = Math.floor(rem / 3600);
    rem = rem % 3600;
    var minutes = Math.floor(rem / 60);
    var seconds = rem % 60;

    daysEl.textContent = String(days);
    hoursEl.textContent = pad2(hours);
    minsEl.textContent = pad2(minutes);
    secsEl.textContent = pad2(seconds);
  }

  function tick(){
    var widgets = document.querySelectorAll(".la28-countdown");
    widgets.forEach(updateOne);
  }

  tick();
  setInterval(tick, 1000);
})();
</script>

Variante B: Als „Einzeiler“ (empfohlen für viele Seiten)

Wenn Countdown auf vielen Unterseiten eingebunden werden sollen, ist das sauberste Vorgehen:

  1. Du legst eine einzige Datei auf example.com ab (z. B. https://example.com/la28-countdown.js)
  2. Du fügst nur noch einen kurzen Embed-Block ein

1) Inhalt für la28-countdown.js (auf Deinem Server ablegen)

(function(){
  var targetUtcIso = "2028-07-15T00:00:00Z"; // 14.07.2028 17:00 PT (PDT)
  var target = new Date(targetUtcIso).getTime();

  function pad2(n){ return String(n).padStart(2, "0"); }

  function updateOne(root){
    var now = Date.now();
    var diff = target - now;

    var daysEl = root.querySelector('[data-part="days"]');
    var hoursEl = root.querySelector('[data-part="hours"]');
    var minsEl = root.querySelector('[data-part="minutes"]');
    var secsEl = root.querySelector('[data-part="seconds"]');
    if (!daysEl || !hoursEl || !minsEl || !secsEl) return;

    if (diff <= 0){
      daysEl.textContent = "0";
      hoursEl.textContent = "00";
      minsEl.textContent = "00";
      secsEl.textContent = "00";
      var meta = root.querySelector(".la28-countdown__meta");
      if (meta) meta.textContent = "Die Olympischen Sommerspiele 2028 haben begonnen.";
      return;
    }

    var totalSeconds = Math.floor(diff / 1000);
    var days = Math.floor(totalSeconds / 86400);
    var rem = totalSeconds % 86400;
    var hours = Math.floor(rem / 3600);
    rem %= 3600;
    var minutes = Math.floor(rem / 60);
    var seconds = rem % 60;

    daysEl.textContent = String(days);
    hoursEl.textContent = pad2(hours);
    minsEl.textContent = pad2(minutes);
    secsEl.textContent = pad2(seconds);
  }

  function tick(){
    document.querySelectorAll(".la28-countdown").forEach(updateOne);
  }

  tick();
  setInterval(tick, 1000);
})();

2) Kurzer Copy-&-Paste-Embed (WordPress & CMS)

(Die Script-URL musst Du auf Deinen finalen Pfad anpassen.)

<div class="la28-countdown" aria-live="polite">
  <div class="la28-countdown__header">
    <strong class="la28-countdown__title">Countdown bis zu den Olympischen Sommerspielen 2028 (Los Angeles)</strong>
    <div class="la28-countdown__meta">Eröffnung: 14. Juli 2028, 17:00 Uhr (Pacific Time)</div>
  </div>

  <div class="la28-countdown__grid" role="group" aria-label="Zeit bis zur Eröffnung">
    <div class="la28-countdown__cell"><span class="la28-countdown__num" data-part="days">–</span><span class="la28-countdown__label">Tage</span></div>
    <div class="la28-countdown__cell"><span class="la28-countdown__num" data-part="hours">–</span><span class="la28-countdown__label">Stunden</span></div>
    <div class="la28-countdown__cell"><span class="la28-countdown__num" data-part="minutes">–</span><span class="la28-countdown__label">Minuten</span></div>
    <div class="la28-countdown__cell"><span class="la28-countdown__num" data-part="seconds">–</span><span class="la28-countdown__label">Sekunden</span></div>
  </div>
</div>

<style>
  .la28-countdown{border:1px solid rgba(0,0,0,.12);border-radius:12px;padding:16px;margin:16px 0;background:#fff}
  .la28-countdown__header{margin-bottom:12px}
  .la28-countdown__title{display:block;font-size:1.05rem;line-height:1.35}
  .la28-countdown__meta{margin-top:4px;opacity:.8;font-size:.95rem}
  .la28-countdown__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:12px 0 6px}
  .la28-countdown__cell{border:1px solid rgba(0,0,0,.10);border-radius:10px;padding:10px 8px;text-align:center}
  .la28-countdown__num{display:block;font-size:1.6rem;font-weight:700;letter-spacing:.02em}
  .la28-countdown__label{display:block;margin-top:2px;font-size:.9rem;opacity:.8}
  @media (max-width:640px){.la28-countdown__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
</style>

<script defer src="https://example.com/la28-countdown.js"></script>

Hier ist der Javascript-Code als lauffähiges Beispiel eingebunden:

Countdown bis zu den Olympischen Sommerspielen 2028 (Los Angeles)
Eröffnung: 14. Juli 2028, 17:00 Uhr (Pacific Time)
–Tage
–Stunden
–Minuten
–Sekunden
Zeitziel: 14.07.2028 17:00 PT (PDT, UTC−7). Anzeige in Echtzeit.


Anbieter für sportliche Countdowns (Web & WordPress)

Die folgenden Anbieter ermöglichen Dir die einfache Einbindung von Countdowns für sportliche Großereignisse. Die Anbieter sind alphabetisch nach Link sortiert.

Link zum AnbieterBeschreibung des Angebots
https://countingdownto.comKostenloser Online-Countdown für Sportevents wie EM, WM oder Olympia. Der Countdown lässt sich individuell konfigurieren und per Embed-Code auf jeder Website einbauen.
https://logwork.com/countdown-timerModerner Countdown-Generator mit verschiedenen Designs. Ideal für Sportereignisse, inkl. Live-Vorschau und einfacher Einbindung per iFrame oder HTML.
https://www.webcountdown.de/web/quickcountdowns.htmlFlexibler Countdown-Generator, bei dem Du das Zieldatum frei festlegen kannst. Geeignet für EM, WM, Olympische Spiele, Tour de France oder andere Sportevents. Die Einbindung erfolgt per HTML-Code.
https://wordpress.org/plugins/countdown-timer-ultimateBeliebtes WordPress-Plugin für Countdown-Timer. Ideal für Sportevents, vollständig responsive und per Shortcode oder Block integrierbar.

Sport-Countdowns in WordPress integrieren

Wenn Du WordPress nutzt, hast Du mehrere Möglichkeiten, einen Countdown einzubinden:

  • Per Plugin (empfohlen): Besonders einfach und wartungsarm, ideal für Einsteiger und Fortgeschrittene
  • Per HTML / JavaScript: Direkt im Block-Editor oder über ein HTML-Widget einfügbar
  • Per Shortcode: Viele Plugins bieten flexible Shortcodes für Seiten, Beiträge oder Widgets

Alle oben genannten Lösungen sind mit WordPress kompatibel und lassen sich problemlos in bestehende Layouts integrieren.

Fazit

Ein Countdown zur nächsten EM, WM oder zu anderen sportlichen Großereignissen ist eine einfache und wirkungsvolle Möglichkeit, Deine Sport-Website aufzuwerten. Dank der zahlreichen kostenlosen und WordPress-fähigen Anbieter kannst Du Deinen Sport-Countdown schnell umsetzen und flexibel anpassen – ganz ohne großen technischen Aufwand.

Wenn Du regelmäßig über Sportevents berichtest oder eine Vereins- oder Fan-Website betreibst, ist ein Sport-Countdown ein cooles Gadget für Deine Homepage!


Jimdo - die erste Webseite, die mitdenktZählpixel

Diese Unterseite / Rubrik wurde zuletzt aktualisiert am 3. Januar 2026

User online: