How to create a countdown timer using jQuery?

Question

I will have more than one of these small boxes on my site, and each will start counting at a different time.

How can I reduce the numerical value of a timer per second by simulating a countdown timer?

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

Using this javascript, it correctly takes into account the number of views, but each individual block is affected. How would you propose isolating a timer to act on only one element?

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

Answer 1

Try the following, which will correctly display the counter for the selected values.

 $(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 example

• http://jsfiddle.net/n24BP/

Note. This will result in a countdown sequence for each element that has the countdown class. If you want to make it more restrictive for a single element, you need to change the selector from .countdown to something more restrictive. The easiest way is to add an id and directly reference the element.

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

JavaScript is a bit more complicated here because you want the timer to be eventually turned off, as there wasn’t much chance or use of an element with a duplicate identifier added.

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

JSFiddle example

• http://jsfiddle.net/bSe9E/

Answer 2

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

Fiddle: http://jsfiddle.net/wwvEn/

Answer 3

You do not need jQuery to do this (although this will help in customizing the text).

setInterval is what you want.

 $.each( $('.countdown'), function(el) { setInterval( function() { $(this).text($(this).text()*1 - 1); }, 1000); } ); 

Answer 4

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

Answer 5

In the inspector, try to find out how the countdown timer works:

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

And here is the complete code for your case (without jquery)

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