Wie fügt man einen Countdown-Timer zu seiner Website hinzu?

Möchten Sie das Erscheinungsbild Ihrer Website attraktiver gestalten und die Nutzerinteraktion erhöhen? Fügen Sie eine interaktive Uhr hinzu, die die Zeit bis zu Ihrem Event herunterzählt!

Befolgen Sie einfach diese wenigen Schritte:

1. Gehen Sie zum Website > Listen der seiten und wählen Sie die Unterseite aus, auf der Sie die Uhr platzieren möchten.

2. Fügen Sie einen neuen Abschnitt oder Inhaltsblock hinzu. Gehen Sie dann in die HTML-Bearbeitung des gewählten Elements und fügen Sie den untenstehenden Code ein.

Denken Sie daran, das richtige Veranstaltungsdatum einzustellen und eine kurze Beschreibung über der Uhr hinzuzufügen.

<div class="center column fourth">
    <div class="is-card is-card-circle is-dark-text shadow-1" style="padding: 10px; width: 200px; height: 200px; background-color: rgb(7, 19, 61);">
        <div class="is-card-content-centered">
            <h1 class="text-center leading-14 font-semibold size-48" id="days" style="color: rgb(247, 247, 247); font-family: Poppins, sans-serif;">138</h1>
            <h4 class="text-center size-30 font-semibold" style="color: rgb(247, 247, 247); font-family: Poppins, sans-serif;">Tage</h4>
        </div>
    </div>

</div>
<div class="center column fourth">
    <div class="is-card is-card-circle is-dark-text shadow-1" style="padding: 10px; width: 200px; height: 200px; background-color: rgb(7, 19, 61);">
        <div class="is-card-content-centered">
            <h1 class="text-center leading-14 font-semibold size-48" id="hours" style="color: rgb(243, 244, 251); font-family: Poppins, sans-serif;">2</h1>
            <h4 class="text-center size-30 font-semibold" style="color: rgb(243, 244, 251); font-family: Poppins, sans-serif;">Stunden</h4>
        </div>
    </div>

</div>
<div class="center column fourth">
    <div class="is-card is-card-circle is-dark-text shadow-1" style="padding: 10px; width: 200px; height: 200px; background-color: rgb(7, 19, 61);">
        <div class="is-card-content-centered">
            <h1 class="text-center leading-14 font-semibold size-48" id="minutes" style="color: rgb(243, 244, 251); font-family: Poppins, sans-serif;">41</h1>
            <h4 class="text-center size-30 font-semibold" style="color: rgb(243, 244, 251); font-family: Poppins, sans-serif;">Minuten</h4>
        </div>
    </div>

</div>
<div class="center column fourth">
    <div class="is-card is-card-circle is-dark-text shadow-1" style="padding: 10px; width: 200px; height: 200px; background-color: rgb(7, 19, 61);">
        <div class="is-card-content-centered">
            <h1 class="text-center leading-14 font-semibold size-48" id="seconds" style="color: rgb(243, 244, 251); font-family: Poppins, sans-serif;">0</h1>
            <h4 class="text-center size-30 font-semibold" style="color: rgb(243, 244, 251); font-family: Poppins, sans-serif;">Secunden</h4>
        </div>
    </div>

</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script class="is-animated is-fadeIn delay-500ms">
    $(document).ready(function() {
        // Zieltermin (22. September 2025, 17:00 Uhr)
        var targetDate = new Date("2025-09-22T17:00:00").getTime();

        // Aktualisiere den Countdown jede Sekunde
        var countdown = setInterval(function() {
            // Aktuelles Datum und Uhrzeit
            var now = new Date().getTime();

            // Differenz zwischen dem aktuellen Zeitpunkt und dem Zieltermin
            var distance = targetDate - now;

            // Berechnungen für 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);

            // Zeige die Ergebnisse in den entsprechenden Elementen an
            $("#days").text(days);
            $("#hours").text(hours);
            $("#minutes").text(minutes);
            $("#seconds").text(seconds);

            // Wenn der Countdown vorbei ist, stoppe den Timer
            if (distance < 0) {
                clearInterval(countdown);
                $("#days").text("0");
                $("#hours").text("0");
                $("#minutes").text("0");
                $("#seconds").text("0");
            }
        }, 1000); // Aktualisiere jede Sekunde
    });
</script>

3. Speichern Sie die Änderungen und prüfen Sie, wie die Uhr auf Ihrer Seite aussieht.

Zusätzlich können Sie im Conrego-Panel im Bereich Einstellungen das Aussehen der Uhr ganz einfach anpassen: ändern Sie die Hintergrundfarbe, die Breite und Höhe der Kreise sowie die Schriftfarben. Passen Sie die Uhr dem Stil Ihrer Website an!