Countdown Counter Javascript or Jquery?

Question

I am tryin to create a simple counter that counts backwards from 3 to 0 or 5 to 0 or whatever.

It's a timer for a questions so each number needs to be visible to the user.

I tried:

for (i=3;i>=0;i--){

   $(".timerInner").delay(500).text( i );

}

But had no luck.

First, the loop is very fast, so all these three statements in the loop body are basically executed at the same time. Second, text is not an animation function, so calling delay first has no effect. I think there a million countdown scripts for jQuery you can use. — Felix Kling
– Felix Kling, Commented Mar 3, 2012 at 13:14

David G · Accepted Answer · 2012-03-03 13:29:03Z

3

Use setInterval/clearInterval instead:

var i = 5;

var t = setInterval(function() {
    i === 0 && clearInterval(t);

    $(".timerInner").text(i);
    i--;
}, 1000);

edited Mar 3, 2012 at 13:29

answered Mar 3, 2012 at 13:23

David G

97.6k41 gold badges173 silver badges258 bronze badges

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

Comments

Parag Gajjar · Accepted Answer · 2012-03-03 13:28:16Z

2

Try this,

var i =5;

var timer = setInterval( calltimer, 500);

function calltimer(){
    $(".timerInner").append( i );

    if(i == 0){
       clearInterval(timer);
    }
    i--;

}

answered Mar 3, 2012 at 13:28

Parag Gajjar

7301 gold badge11 silver badges25 bronze badges

1 Comment

Splat ty Over a year ago

Thanks I ended up using this code, but the .append(i) I swithced with .text(i) append did not seem to show results..

Miroslav Bajtoš · Accepted Answer · 2012-03-03 13:27:19Z

1

I recommend to use JavaScript method setTimeout:

function countdown(remainingTime) {
    $('.timerInner').text(remainingTime);
    if (remainingTime > 0)
        setTimeout(function() { countdown(remainingTime - 100); }, 100);
}

countdown(1000);

Fiddle example to play with: http://jsfiddle.net/MSa8h/1/

answered Mar 3, 2012 at 13:27

Miroslav Bajtoš

10.8k1 gold badge43 silver badges101 bronze badges

Comments

Liviu · Accepted Answer · 2012-03-03 13:25:35Z

0

uou need to create a loop bassed on setTimeout function, here's a sketch

var i = 3;

var calc = function(){
    i--;
    if(i==0){
      //start new iteration
      timeout();
    }else{
      //end loop
      return;
    }

};

var timeout = function(){
    setTimeout(calc,1000);
};

answered Mar 3, 2012 at 13:25

Liviu

4621 gold badge6 silver badges14 bronze badges

1 Comment

Felix Kling Over a year ago

You can also omit the else block.

Splat ty · Accepted Answer · 2012-03-04 16:36:08Z

0

var i =5;

var timer = setInterval( calltimer, 500);

function calltimer(){
   $(".timerInner").text( i );

 if(i == 0){
    clearInterval(timer);
 }
 i--;

}

Thanks for the help

answered Mar 4, 2012 at 16:36

Splat ty

414 silver badges11 bronze badges

Collectives™ on Stack Overflow

Countdown Counter Javascript or Jquery?

5 Answers 5

Comments

1 Comment

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related