Countdown script

BlackBox · 24. November 2018

Hallo zusammen,

ich würde gerne einen Countdown für WHMCS nutzen für Rabatt Aktionen. Leider habe ich nun ein Problem sobald ich die Seite neu lade oder der Countdown abläuft fangt dieser wieder von vorne an. So sieht der script aus.

HTML

<div style="font-size: 120%;text-align:center;">
                        <div class="onlymob"><br></div>
                        <div class="alert alert-success" style="font-size: 120%;border-radius: 0;">
                            Bestelle innerhalb der nächsten <br>
                            <span id="discountCountdown" style="font-weight: bold;"> Tagen  Stunden  Minuten und  Sekunden</span><br>
                            und erhalte <strong>80% Rabatt</strong> auf die erste Laufzeit.<br>
                        </div>
                    </div>

JavaScript

<script>
            var secondsTillEnd = 120;
            var seconds = secondsTillEnd;
            function countDown() {
                var days = Math.floor(seconds / 24 / 60 / 60);
                var hoursLeft = Math.floor((seconds) - (days * 86400));
                var hours = Math.floor(hoursLeft / 3600);
                var minutesLeft = Math.floor((hoursLeft) - (hours * 3600));
                var minutes = Math.floor(minutesLeft / 60);
                var remainingSeconds = seconds % 60;
                var daysText = "Tagen";
                if (days === 1) {
                    daysText = "Tag";
                }
                var hoursText = "Stunden";
                if (hours === 1) {
                    hoursText = "Stunde";
                }
                var minutesText = "Minuten";
                if (minutes === 1) {
                    minutesText = "Minute";
                }
                var secondsText = "Sekunden";
                if (remainingSeconds === 1) {
                    secondsText = "Sekunde";
                }
                if (remainingSeconds < 10) {
                    remainingSeconds = "0" + remainingSeconds;
                }
                document.getElementById('discountCountdown').innerHTML = days + " " + daysText + " " + hours + " " + hoursText + " " + minutes + " "+ minutesText +" und " + remainingSeconds + " " + secondsText;
                if (seconds <= 0) {
                    clearInterval(countdownTimer);
                    document.getElementById('discountCountdown').innerHTML = "Abgelaufen";
                    document.location = '';
                } else {
                    seconds--;
                }
            }
            var countdownTimer = setInterval('countDown()', 1000);
        </script>

Alles anzeigen

Der Countdown soll außerdem nach Ablauf der Zeit weg sein ohne das man es Manuel ausnehmen muss.

Ich hoffe mir kann einer weiterhelfen und das Problem beheben.

Grüße BlackBox

**Denis** · 24. November 2018

Zitat von BlackBox

Leider habe ich nun ein Problem sobald ich die Seite neu lade oder der Countdown abläuft fangt dieser wieder von vorne an.

In deinem Script ist, soweit ich das sehe, ja auch kein fester Bezugspunkt (Enddatum) definiert.

BlackBox · 24. November 2018

Hab es nun zu geändert:

JavaScript

<script>


var countDownDate = new Date("November 24, 2022 14:48:25").getTime();
var x = setInterval(function() {
    var now = new Date().getTime();
    var distance = countDownDate - now;
    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);

    document.getElementById("Countdown").innerHTML = days + "Tagen " + hours + "Stunden "
    + minutes + "Minuten " + seconds + "Sekunden ";

    if (distance < 0) {
        clearInterval(x);
        document.getElementById("Countdown").innerHTML = "Abgelaufen";
    }
}, 1000);
</script>

Alles anzeigen

Jetzt habe ich nur noch das Problem sobald es abgelaufen ist muss ich es Manuel raus nehmen. Ist es möglich das es Automatisch weg geht sobald die Zeit abgelaufen ist?

speedy · 24. November 2018

Nimm dir einen Hook der dir z.B. 1 zurück gibt solange das Datum noch nicht erreicht ist und umschließe deinen Code mit einem if VAR == 1

BlackBox · 24. November 2018

Ich bekomme es leider nicht hin. Das nach Ablauf der Zeit der "Countdown" verschwindet (automatisch).

BlackBox · 25. November 2018

Die Zeile:
document.getElementById("Countdown").innerHTML = "EXPIRED";

Durch diese Zeile ersetzt:
document.getElementById("Countdown").remove();

Danach wird der Countdown einfach ausgeblendet, sobald er abgelaufen ist.

Ist das ganze auch mit diesen Text möglich? Falls ja was müsste man ändern damit es beim Ablauf des Countdown auch ausgeblendet wird ?

HTML

<div style="font-size: 120%;text-align:center;">
 <div class="onlymob"><br></div>
 <div class="alert alert-success" style="font-size: 120%;border-radius: 0;">
 Bestelle innerhalb der nächsten <br>
 <span id="discountCountdown" style="font-weight: bold;"> Tagen Stunden Minuten und Sekunden</span><br>
 und erhalte <strong>80% Rabatt</strong> auf die erste Laufzeit.<br>
 </div>
 </div>

BlackBox · 25. November 2018

Hab nun die Fehler gefunden.Jetzt läuft nun alles.

Für alle die den Countdown auch nutzen wollen hier ist der Code:

HTML

<div style="font-size: 120%;text-align:center;"><div id="countdowntext">
                        <div class="onlymob"><br></div>
						<span style="color:#ff6c3a"> <b><u>Aktion XY </b></u>
                        <div class="alert alert-success" style="font-size: 120%;border-radius: 0;">
                            Text <br>
                            <span id="Countdown" style="font-weight: bold;"> Tagen  Stunden  Minuten  Sekunden</span><br>
                             Text <strong>80% Rabatt</strong> Test.<br>
							 Gutscheincode: <strong>Gutscheincode80</strong><br>
                        </div>
                    </div>

JavaScript

<script>
var countDownDate = new Date("November 25, 2025 18:52:59").getTime();
var x = setInterval(function() {
    var now = new Date().getTime();
    var distance = countDownDate - now;
    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);
    document.getElementById("Countdown").innerHTML = days + " Tagen " + hours + " Stunden "
    + minutes + " Minuten " + seconds + " Sekunden ";
    if (distance < 0) {
        clearInterval(x);
		document.getElementById("Countdown").remove();
		document.getElementById("countdowntext").remove();
    }
}, 1000);
</script>

Alles anzeigen

Das Thema kann nun geschlossen werden.