Таймер обратного отсчета jQuery

В настоящее время у меня есть этот код

setTimeout(function() { $('#hideMsg').fadeOut('fast'); }, 2000);

Можно ли поставить таймер обратного отсчета на 2 секунды?

Как

<div id="hideMsg">
The entry you posted not valid.
This Box will Close In 2 Seconds
</div>

"Эта ячейка закрывается за 2 секунды" автоматически изменится на 2 сек 1 сек

Ответы

Ответ 1

используйте setInterval вместо setTimeout, затем с комбинацией clearInterval

var sec = 2
var timer = setInterval(function() { 
   $('#hideMsg span').text(sec--);
   if (sec == -1) {
      $('#hideMsg').fadeOut('fast');
      clearInterval(timer);
   } 
}, 1000);

HTML

<div id="hideMsg">
The entry you posted not valid.
This Box will Close In <span>2</span> Seconds
</div>

сумасшедшая демонстрация

Сделать это лучше.

var sec = $('#hideMsg span').text() || 0;
var timer = setInterval(function() { 
   $('#hideMsg span').text(--sec);
   if (sec == 0) {
      $('#hideMsg').fadeOut('fast');
      clearInterval(timer);
   } 
}, 1000);​

так что время будет зависеть от того, что находится внутри <span>. Например, <span>2</span> составляет 2 секунды, <span>5</span> - 5 секунд, а <span>60</span> - 1 минута.

еще одна сумасшедшая демонстрация

Ответ 2

Примечание:

Я не понимал, насколько это было похоже на Рейгеля, пока я не прочитал его ответ. В основном, единственное отличие заключается в том, что я использую .delay(), чтобы скрыть div вместо интервала. Различные варианты...

Если вы поместите начальное число в <span>, это будет отсчитываться до нуля от любого числа:

$(function() {

               // Number of seconds counter starts at is what in the span
    var timer, counter = $("#hideMsg span").text();

      // Delay the fadeout counter seconds
    $('#hideMsg').delay(counter * 1000).fadeOut('fast');

      // Update countdown number every second... and count down
    timer = setInterval(function() {

        $("#hideMsg span").html(--counter);
        if (counter == 0) { clearInterval(timer)};

    }, 1000);

});​

Пример jsFiddle


Это использует jQuery native .delay(), и он использует setInterval(), который останавливается, когда он достигает нуля.

Ответ 3

Сделайте еще один тайм-аут установки после секунды и установите .html() для div следующим образом:

setTimeout(function() { $('#hideMsg').html('The entry you posted not valid. <br /> This Box will Close In 1 Second'); }, 1000);

Поместите их в функцию и запустите функцию onload следующим образом:

<body onload="function_name()">

надеюсь, что это поможет.