Redirect to 10, ... 9, ... script

Question

Hy

I have 10 seconds. delay.

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

And the redirect function (strUrl) just executes document.location

Which would be nice if I got a small message at the bottom of my page, for example: redirecting after 10 seconds ...

"a second after starting setTimeout"

... Redirection to fate after 9 seconds.

etc.

ps. and the points at the end go from left to right, you know that ......

I myselft probably learns how to get every second timeout, and only with jquery did the number change ... if that were possible at all.

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

Take a look at jsFiddle .

If you want to have a second thing, replace the corresponding line above ...

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

Of course, this works well with English, but probably with other languages, it may not be that simple.

Answer 2

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

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

Living example

Please note that this will not be accurate, because the timeout will not necessarily be triggered exactly after one second. But it will be close.

Answer 3

try the following:

 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

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

Answer 5

I would go for the countdown plugin . there is an example