Um einen Countdown in LOLYO einzubauen, müssen Sie ein HTML Element erstellen. Dieses können Sie auf einer Custom Page einfügen.
¶ Schritt 1
Klicken Sie auf Inhalt hinzufügen und wählen Sie HTML:
¶ Schritt 2
Sie müssen nun den HTML Code eintragen. Ein funktionierendes Beispiel finden Sie hier:
<div id="containerContdown" class="container my-3">
<h2 class="text-center mb-4">Countdown</h2>
<div class="d-flex justify-content-center mt-3">
<div class="px-3">
<span id="days" class="h2 d-flex justify-content-center">30</span>
<div class="d-flex justify-content-center small text-muted text-uppercase">Tage</div>
</div>
<div class="px-3">
<span id="hours" class="h2 d-flex justify-content-center">10</span>
<div class="d-flex justify-content-center small text-muted text-uppercase">Stunden</div>
</div>
<div class="px-3">
<span id="minutes" class="h2 d-flex justify-content-center">20</span>
<div class="d-flex justify-content-center small text-muted text-uppercase">Minuten</div>
</div>
<div class="px-3">
<span id="seconds" class="h2 d-flex justify-content-center">31</span>
<div class="d-flex justify-content-center small text-muted text-uppercase">Sekunden</div>
</div>
</div>
</div>
<script>
// Set your target date here (Year, Month[0-11], Day, Hour, Minute, Second)
const targetDate = new Date(2025, 6, 13, 23, 59, 59);
function updateCountdown() {
const currentDate = new Date();
const difference = targetDate - currentDate;
if (difference <= 0) {
document.querySelector('#containerContdown').innerHTML = '<h2 class="text-center">Countdown Complete!</h2>';
return;
}
const days = Math.floor(difference / (1000 * 60 * 60 * 24));
const hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((difference % (1000 * 60)) / 1000);
document.getElementById('days').textContent = days === 0 ? '00' : days.toString();
document.getElementById('hours').textContent = hours.toString().padStart(2, '0');
document.getElementById('minutes').textContent = minutes.toString().padStart(2, '0');
document.getElementById('seconds').textContent = seconds.toString().padStart(2, '0');
}
setInterval(updateCountdown, 1000);
updateCountdown();
</script>
Sie müssen die Überschrift und die Zeit im Code individuell anpassen. In der Anweisung über dem Datum im Code, sind die Monate von 0-11 indiziert.
¶ Schritt 3
Fügen Sie nun den angepassten Code in LOLYO ein:
Wir haben in diesem Beispiel die Überschrift "Countdown Graz" gewählt. Speichern Sie nun den Block.
In der Useransicht finden Sie nun den Countdown:
