Umleitung in Skript 10,...9,...

Question

Hy,

Ich habe eine 10-Sekunden-Verzögerungsseite.

var t = window.setTimeout('redirect(strUrl)', 11000);

Und function redirect(strUrl) macht einfach document.location

Es wäre schön, wenn ich eine kleine Meldung am unteren Rand meiner Seite anzeigen lassen könnte, zum Beispiel: Weiterleitung in 10 Sekunden...

"eine Sekunde später, als setTimeout ausgelöst wurde"

...Weiterleitung zum Schicksal in 9 Sekunden...

usw.

ps. und die Punkte am Ende, die von links nach rechts gehen, kennen Sie. .. ...

Ich myselft würde wahrscheinlich herausfinden, wie man, dass jede Sekunde von Timeout und nur mit jquery die Zahl geändert ... wenn das überhaupt möglich wäre.

Answer 1

var timeout = 11; // in seconds

var msgContainer = $('<div />').appendTo('body'),
    msg = $('<span />').appendTo(msgContainer),
    dots = $('<span />').appendTo(msgContainer); 

var timeoutInterval = setInterval(function() {

   timeout--;

   msg.html('Redirecting in ' + timeout + ' seconds');

   if (timeout == 0) {
      clearInterval(timeoutInterval);
      redirect(strUrl);
   } 

}, 1000);

setInterval(function() {

  if (dots.html().length == 3) {
      dots.html('');
  }

  dots.html(function(i, oldHtml) { return oldHtml += '.' });
}, 500);

Siehe auf jsFiddle .

Wenn Sie die zweite(n) Sache(n) haben wollten, ersetzen Sie die entsprechende Zeile oben mit...

msg.html('Redirecting in ' + timeout + ' second' + ((timeout != 1) ? 's' : ''));

Das funktioniert natürlich gut mit Englisch, ist aber wahrscheinlich nicht so einfach mit anderen Sprachen.

Answer 2

Sie können dies tun, indem Sie eine div Sie positionieren sich absolut mit bottom y left Koordinaten, und aktualisieren Sie den Text in der div durch Schleifen auf jede Sekunde. Etwas wie dies:

function redirect(strurl) {
  var seconds = 10;
  var div = $("<div/>").css({
    position: "absolute",
    left: "0px",
    bottom: "0px"
  }).appendTo(document.body);

  continueCountdown();

  function continueCountdown() {
    --seconds;
    if (seconds >= 0 ) {
      div.text("...Redirecting in " + seconds + " seconds...");
      setTimeout(continueCountdown, 1000);
    }
    else {
      // Redirect here
      document.location = strurl;
    }
  }
}

Live-Beispiel

Beachten Sie, dass dies die ungenau da die Zeitüberschreitung nicht unbedingt in genau einer Sekunde erfolgt. Aber es wird nahe dran sein.

Answer 3

Versuchen Sie dies:

var count=10;

window.setTimeout(function(){redirect(url)}, 1000);

function redirect(url){
    if(--count==0){
        location.href=url;
        return;
    }
    $("#DIV_TO_DISPLAY_MESSAGE").text("redirecting in " + count+" secs.");
    window.setTimeout(function(){redirect(url)}, 1000);
}

Answer 4

Definieren Sie eine Variable mit der Anzahl der Sekunden, und rufen Sie in setTimeout( ... , 1000 ) eine Funktion auf, die die Anzahl der Sekunden verringert, den Inhalt von some-div/span... ändert, und wenn secs = 0 redirect .

Answer 5

Ich würde mich für countdown-plugin . gibt es eine Beispiel vorhanden