Как создать таймер обратного отсчета с помощью jQuery?

У меня на сайте будет несколько таких маленьких коробочек, и каждая начнет отсчет в разное время.

Как я могу уменьшить численное значение таймера в секунду, давая моделирование таймера обратного отсчета?

Введите описание изображения здесь

<p class="countdown">15</p>

Используя этот javascript, он правильно подсчитывает, но каждый отдельный auctionbox затронут. Как бы вы предложили мне изолировать таймер, чтобы он действовал только на один элемент?

<script>
var sec = 15
var timer = setInterval(function() {
   $('.auctiondiv .countdown').text(sec--);
   if (sec == -1) {
      $('.auctiondiv .countdown').fadeOut('slow');
      clearInterval(timer);
   }
}, 1000);
</script>

Введите описание изображения здесь

5 4
html css jquery timer countdown

5 ответов:

Попробуйте выполнить следующие действия, которые правильно выдадут обратный отсчет для выбранных значений. 

$(document).ready(function() {

  // Function to update counters on all elements with class counter
  var doUpdate = function() {
    $('.countdown').each(function() {
      var count = parseInt($(this).html());
      if (count !== 0) {
        $(this).html(count - 1);
      }
    });
  };

  // Schedule the update to happen once every second
  setInterval(doUpdate, 1000);
});

Пример JSFiddle

Примечание: это приведет к запуску последовательности обратного отсчета для каждого элемента, имеющего класс countdown. Если вы хотите сделать его более ограничительным для одного элемента, вам нужно изменить селектор с .countdown на что-то более ограничительное. Самый простой способ-добавить идентификатор и ссылку на элемент непосредственно.

<p id='theTarget'>15</p>

JavaScript здесь немного сложнее, потому что вы хотите, чтобы таймер в конечном итоге отключился, так как нет большого шанса, или использования, элемента с повторяющимся идентификатором добавляется 

$(document).ready(function() {

  var timer = setInterval(function() {

    var count = parseInt($('#theTarget').html());
    if (count !== 0) {
      $('#theTarget').html(count - 1);
    } else {
      clearInterval(timer);
    }
  }, 1000);
});

Пример JSFiddle

11

HTML: 

<p id="countdown">15</p>

JS: 

var count = document.getElementById('countdown');
timeoutfn = function(){
       count.innerHTML = parseInt(count.innerHTML) - 1;
       setTimeout(timeoutfn, 1000);
};
setTimeout(timeoutfn, 1000);

Скрипка: http://jsfiddle.net/wwvEn/

4

Для этого вам не нужен jQuery (хотя он поможет в настройке текста).

setInterval это то, чего ты хочешь.

$.each(
    $('.countdown'), function(el) { 
         setInterval( function() { 
             $(this).text($(this).text()*1 - 1);
         }, 1000); 
    }
);
1
var countDown = function() {
    var ct = 15;
    var $elem = $(this);
    var display = function() {
       $elem.text(ct--);
    }
    var iv = setInterval(function() {
        display();
        if (ct === 0) {
          clearInterval(iv);
        }
    }, 1000);
    display();
};
$("#countdown").each(countDown);
0

Попробуйте это в своем инспекторе, чтобы получить представление о том, как должен работать таймер обратного отсчета: 

var count = 15; setInterval("if(count>0)console.log(count--)", 1000)

А вот полный код для вашего случая (без jquery) 

var counter = document.getElementsByClassName('countdown')[0],
    count = parseInt(counter);
setInterval("if(count>0)counter.innerHTML(count--)", 1000)
0