4

I'll have more than one of these small boxes on my site, and each will start counting down at different times.

How can I decrease the numerical value of the timer per second, giving the simulation of a countdown timer?

enter image description here

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

Using this javascript it correctly countsdown, but every single auctionbox is affected. How would you suggest I isolate the timer to act on only one item?

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

enter image description here

Improve this question
4
  • The reason it affects all of them is because you're working on the CLASS, not the ID. Create a unique ID for your element. Commented Aug 29, 2011 at 21:11
  • @Sosukodo: Aha! That was it. :) Now the other question would be what ID to assign to each "auctionbox". Would I generate one according to their product name? How would you a veteran webdev, assign an ID to this? What algorithm would you use? Commented Aug 29, 2011 at 21:16
  • Btw maybe you would like to take a look at this wonderful countdown plugin; keith-wood.name/countdown.html Commented Aug 29, 2011 at 21:42
  • I have no idea what your backend looks like or what language you're using to drive it so I have no idea :-) It can be anything you like! Commented Aug 29, 2011 at 22:44

5 Answers 5

Reset to default
11

Try the following which will properly issue the count down 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

Note: This will run the count down sequence on every element which has the countdown class. If you'd like to make it more restrictive to a single element you'll need to alter the selector from .countdown to something more restrictive. The easiest way is to add an id and reference the item directly.

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

The JavaScript is a little more complex here because you'll want the timer to eventually shut off since there's not much chance, or use, of element with a duplicate id being 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

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

@Malvolio: You're a rude person.
I'm just sleepy. It's four in the morning where I am. @JaradPar -- as the risk of further annoying Sr. Tapia, it's still wrong. The display is no longer updated (a huge improvement), but the timer continues to run ad infinitum.
@Malvolio my answer is written assuming that other DOM elements with the class countdown can be added at any time. The counter running forever is by design to handle this case
@JaredPar -- that's either a good explanation or a clever backfill. If you can tell me that was your intent, I'll upvote.
@Malvolio it was indeed my intent.
4

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/

Improve this answer

4 Comments

as written, that goes from 15 to 14 and then stops.
Good answer. However, what happens once the value is below zero? (wink). Also, should be setInterval() not setTimeout
@Neal -- now it never stop!
@Malvolio -- as stated on the other answer, the OP never stated for it to stop....
1

You don't need jQuery for this (though it will help in setting the text).

setInterval is what you want.

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

6 Comments

@Mavolio -- when did the OP say they wanted it to stop counting down?
Wow, why the hate? It was my understanding that SO is not code machine but a helper - and that is what I did. I gave the OP a basis to work off of. And as @Neal said, it was never technically specified that it should stop.
@Neal -- that's kind of the point of a countdown. Fritz Lang, who invented the countdown for his 1929 film Woman In The Moon, explained that if you counted up, the audience wouldn't know when the rocket would launch; with a count down, everybody knows when you get to zero, boom.
@Malvolio: While I understand that you feel it should stop at zero (and I do agree), I don't feel that writing full, complete, and error-proof code for anyone who asks for it is correct. Also, I suspect people used countdowns a bit before 1929 :)
@josh.trow -- I didn't mean to sound hostile. Like I said, it's four in the morning here. I worry that several people (including myself) posted answers that were just wrong -- not "unhelpful", actually in error.
|
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);
Improve this answer

6 Comments

Why are you using each to iterate over an id selector (should only return 1 element)? Seems odd especially since the OP specified a style in the question? Also you're re-populating the HTML element with 15 instead of using the value put into the HTML.
Good questions, to which I have only lame answers. As I was originally writing it, I looked at Neal's answer, which had the ID. It wasn't (and isn't) clear to me what the OP needs. A countdown from 15? A countdown from the current value whatever it is?
The OP is ambiguous on a couple of these elements. They both explicitly set the HTML element to 15 and then reset it to 15 their self (a bit odd). Mainly I was distracted by the each on the id selector. I don't believe that has any functional value but not good enough with js to say for sure (experiments say no). Note: I'm not the downvoter.
About each: you have to do something. All jQuery elements consist of "some number" of DOM elements. Even if you as the programmer knows that that "some number" is 1, the code doesn't. $.each is as good a way as any to get to it. "Functional value" is exactly what it does have, in the "functional programming" sense of "functional".
By functional I meant did it have a functional difference between using each and just calling the method on $('#countdown') directly. I don't believe this will ever produce a diff but can certainly be convinced
|
0

Try this in your inspector to get the idea how a countdown timer should work:

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

And here is full code for your case(no jquery)

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

1 Comment

Now, I know this may work, but why do it? You are forcing the machine to use eval when you could just send it a clean, anonymous function ready to execute.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.