• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Weiterleitung mit Countdown

subbeone

Neues Mitglied
Hallo liebe Community,

ich würde gerne auf meiner Seite eine Weiterleitung mit Countdown einbauen.
Die Weiterleitung klappt wunderbar, aber für den Counter fehlen mir die Ideen.

Es sollte eigentlich nur ein Satz sein, der lautet:

"Sie werden in 8 Sekunden weitergeleitet, falls nicht, klicken Sie hier:

LINK"

Und die 8 Sekunden sollen auf 0 runterzählen. Jemand eine Idee?
Dem wäre ich dankbar.

MfG

Basti
 
Vielleicht auch mit setTimeout und setInterval.

Ich habe es mal versucht. Die Weiterleitung mit setInterval() ist kein Problem. Wenn ich allerdings die Variable i als Funktionsparameter an countdown() übergebe, erhalte ich ein undefined, und beim Auslösen von stop() wird countdown() neu gestartet. Gibt es dafür eine Lösung?

HTML:
<!DOCTYPE html>
<html>
<head>
<title>Timeout</title>
</head>
<body>
<script type="text/javascript">
    var i = 10;
    var timer = window.setInterval("countdown()", 1000);

    function countdown() {
        document.getElementById("countdown").innerHTML = 'Sie werden in ' + i + ' Sekunden weitergeleitet!<br />';
        i--;
        if (i <= -1) {
            window.location = "http://google.de";
        }
    }

    function stop() {
        window.clearInterval("timer");
    };
</script>
    <div id="countdown"></div>
    <div id="stop"><a href="" onclick="stop();">Hier zum Abbruch klicken</a></div>
</body>
</html>

Das Problem dürfte darin bestehen, dass der Countdown beim Aufruf der Seite starten soll und clearInterval() hier einen Refresh auslöst.
 
Zuletzt bearbeitet:
Eben nochmal versucht, das Ganze in jQuery nachzubauen, aber hier erhalte ich beim Aufruf von setInterval() einen JS Fehler.
HTML:
$(function(){
    var zaehler = 1000;
    var countdown = setInterval(function(){
    $("#timer").html(zaehler + " Sekunden bis zur Weiterleitung!");
        if (zaehler == 0) {
              window.location = 'http://google.com';
     }
    zaehler--;
    }, 1000);
    $("#stop").click(function() { 
        $(this).clearInterval("countdown"); 
    });
});

Scheinbar funktionieren setInterval() / clearInterval() im Duo nur dann richtig, wenn man beide an einen Eventhandler bindet.
 
Ich habe es mal versucht. Die Weiterleitung mit setInterval() ist kein Problem. Wenn ich allerdings die Variable i als Funktionsparameter an countdown() übergebe, erhalte ich ein undefined, und beim Auslösen von stop() wird countdown() neu gestartet. Gibt es dafür eine Lösung?
klar:

Code:
<!DOCTYPE html>
<html>
<head>
<title>Timeout</title>
</head>
<body>
    <div id="countdown"></div>
    <div onclick="countdown.stop();">Hier zum Abbruch klicken</div>
    <div onclick="countdown.start();">Hier zum starten klicken</div>
    
<script type="text/javascript">
var countdown = (function(count) {
	var timer;
	var out = document.getElementById("countdown");
    function countdown() {
        write('Sie werden in ' + count-- + ' Sekunden weitergeleitet!');
        if (count < 1) window.location.href = "http://google.de";
    }
    function write(text) {
		out.innerHTML = text
	}
	function start() {
		timer = window.setInterval(countdown, 1000);
		countdown();
	}
	return {
		start:function() { start();},
		stop: function() { window.clearInterval(timer); write('stop');},
	}
})(10);


</script>

</body>
</html>
 
hallo,

sehr interessantes thema, an dem ich auch gerade sitze.

ich hätte gern das die startfunktion automatisch mit aufruf also öffnen der datei beginnt.

anstatt onclick -> onload funktioniert leider nicht. auch window.open nicht.

thx
 
Willkommen im Forum.

„Funktioniert nicht“ ist keine besonders gute Fehlerbeschreibung, weil sich daraus unmöglich ablesen lässt, wo der Fehler genau liegt. Zeige im Zweifel immer den Code.
 
Zurück
Oben