javascript - Redirecting in 10,..9,... script - Stack Overflow

admin管理员组

文章数量:1516870

Hy,

I have a 10 sec. delay page.

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

And function redirect(strUrl) just does document.location

What would be nice if i have a little message displaying at the bottom of my page, for example: Redirecting in 10 seconds...

"one second later that setTimeout fired"

...Redirecting to destiny in 9 seconds..

etc

ps. and the dots at the end going from left to right you know it. .. ...

I myselft would probably find out how to get that every second of timeout and just with jquery altered the number ...if that would be possible at all.

Hy,

I have a 10 sec. delay page.

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

And function redirect(strUrl) just does document.location

What would be nice if i have a little message displaying at the bottom of my page, for example: Redirecting in 10 seconds...

"one second later that setTimeout fired"

...Redirecting to destiny in 9 seconds..

etc

ps. and the dots at the end going from left to right you know it. .. ...

I myselft would probably find out how to get that every second of timeout and just with jquery altered the number ...if that would be possible at all.

• javascript
• jquery
• http-redirect

Share Improve this question Follow asked Jan 27, 2011 at 11:25 PathOfNeoPathOfNeo 1,08944 gold badges2121 silver badges3939 bronze badges 1

• ha :D no,..just having problems with myself. ..first to check answer – PathOfNeo Commented Jan 27, 2011 at 11:32

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 6

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);

See it on jsFiddle.

If you wanted to have the second(s) thing, replace the appropriate line above with...

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

Of course, this works well with English, but probably isn't as easy with other languages.

You can do that by creating a div you position absolutely with bottom and left coordinates, and update the text in the div by looping on each second. Something like this:

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 example

Note that that will be imprecise, because the timeout will not necessarily fire in exactly one second. But it'll be close.

try this:

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);
}

Define a variable with number of secs, and in setTimeout( ... , 1000 ) call function whitch will decrease number of secs, change content of some-div/span..., and if secs = 0 redirect .

i would go for countdown-plugin. there's an example available

本文标签： javascriptRedirecting in 109 scriptStack Overflow