Перенаправление в скрипте 10, .. 9, ...

Question

Hy,

У меня есть 10 сек. задержка страницы.

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

И функция redirect (strUrl) просто выполняет document.location

Что было бы неплохо, если бы в нижней части моей страницы отображалось небольшое сообщение, например: Перенаправление через 10 секунд ...

"через секунду этот setTimeout сработал"

... Перенаправление на судьбу за 9 секунд ..

и т.д.

пс. и точки в конце, идущие слева направо, вы это знаете. .. ...

Я бы, наверное, узнал, как получить каждую секунду тайм-аута и просто с помощью jquery изменить число ... если это вообще возможно.

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

См. Его на jsFiddle .

Если вы хотите получить вторую (ые) вещь, замените соответствующую строку выше на ...

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

Конечно, это хорошо работает с английским, но, вероятно, не так просто с другими языками.

Answer 2

попробуйте это:

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 3

Вы можете сделать это, создав div, вы позиционируете абсолютно с координатами bottom и left, и обновляете текст в div, выполняя циклы каждую секунду.Примерно так:

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

Живой пример

Обратите внимание, что это будет неточно , потому что тайм-аут не обязательно сработает ровно в одномвторой.Но это будет близко.

Answer 4

я бы пошел на плагин обратного отсчета . пример доступен

Answer 5

Определите переменную с количеством секунд, и в setTimeout (..., 1000) вызовите функцию, которая уменьшит количество секунд, изменит содержание some-div / span ... и, если secs = 0, перенаправит.