CODEWITHSUNDEEP
javascriptjquery
nfc
nfc

Reputation: 634

Countdown with jQuery

So, I have this outputted from my DB: 00:01:53
Inside a span tag

<span class="jb_timer">00:01:53</span>

So my question is, how can I make it countdown with jQuery?

Thanks.

Upvotes: 1

Views: 634

Answers (3)

maxedison
maxedison

Reputation: 17553

Here's a very simple one that seems to accomplish exactly what you're looking for. It doesn't have the bells and whistles of the scripts Hanlet linked to, and I think it's a bit simpler than Andrew's solution (even if there are more lines of code... mine doesn't use regular expressions, nor the Date() object).

http://jsfiddle.net/ct3VW/2/

function countDown(timeDiv){
    var timeStringArray = timeDiv.text().split(':');
    var timeNumberArray = [];

    //the following loop simply converts the values in timeStringArray to actual numbers
    for(var i = 0; i < 3; i++){
        timeNumberArray.push(parseInt(timeStringArray[i],10));
    }

    timeNumberArray[2]--; //decrement the seconds

    if(timeNumberArray[2] < 0 && timeNumberArray[1] > 0){
        timeNumberArray[1]--;
        timeNumberArray[2] = 59;
    }

    //this if statement won't have any effect because the sample timer doesn't have any hours at the moment
    if(timeNumberArray[1] < 0 && timeNumberArray[0] > 0){
        timeNumberArray[0]--;
        timeNumberArray[1] = 59;
    }

    var newTimeString = (timeNumberArray[0] < 10) ? '0' + timeNumberArray[0] : timeNumberArray[0];

    for(var i = 1; i < 3; i++){
        var timePart = (timeNumberArray[i] < 10) ? ':0' + timeNumberArray[i] : ':' + timeNumberArray[i];
        newTimeString += timePart;
    }

    if(timeNumberArray[2] !== 0){   //don't want to call the function again if we're at 0
        timeDiv.text(newTimeString);
        setTimeout(
            (function(){
                countDown(timeDiv)
            }),1000);
    }else{
        //here's where you could put some code that would fire once the counter reaches 0.
    }
}

$(function(){
    countDown($('div'));
});

Upvotes: 1

Hanlet Esca&#241;o
Hanlet Esca&#241;o

Reputation: 17370

There are tons of samples and scripts in the Internet. Maybe you will like one of these

Upvotes: 0

Andrew Whitaker
Andrew Whitaker

Reputation: 126042

Here's something that should get you started in the right direction:

var remaining = $("span.jb_timer").text(),
    regex = /\d{2}/g,
    matches = remaining.match(regex),
    hours = matches[0],
    minutes = matches[1],
    seconds = matches[2],
    remainingDate = new Date();

remainingDate.setHours(hours);
remainingDate.setMinutes(minutes);
remainingDate.setSeconds(seconds);

var intvl = setInterval(function () {
    var totalMs = remainingDate.getTime(),
        hours, minutes, seconds;

    remainingDate.setTime(totalMs - 1000);

    hours = remainingDate.getHours();
    minutes = remainingDate.getMinutes();
    seconds = remainingDate.getSeconds();

    if (hours === 0 && minutes === 0 && seconds === 0) {
        clearInterval(intvl);
    }

    $("span.jb_timer").text(
        (hours >= 10 ? hours : "0" + hours) + ":" +
        (minutes >= 10 ? minutes : "0" + minutes)  + ":" +
        (seconds >= 10 ? seconds : "0" + seconds));

}, 1000);

Working Example: http://jsfiddle.net/andrewwhitaker/YbLj4/

Notes:

  • First you have to parse the initial hours, minutes, and seconds out of the span's text. Do this using a simple regular expression.
  • Use setInterval to set up a timer that runs every 1000 milliseconds.
  • When that timer fires, subtract 1000 ms from the time and update the span's text appropriately.
  • When the hours, minutes, and seconds reach 0, clear (cancel) the interval.

Upvotes: 4

Related Questions