CODEWITHSUNDEEP
javascriptjquery
Michael Kaufman
Michael Kaufman

Reputation: 803

Simple jQuery Count Up timer help please

Trying to make a simple count up timer in jQuery... this sort of works but is adding the numbers to the end of '0000' and I want it to go '0001' '0002' '0003' etc...

This is all happening in the jQuery onReady scope.

var i = '0000'
var timer = function doSomething ( )
{
    i = i+= 1
    $('.counter').text(i);
    console.log(i);

}
setInterval (timer, 1000 );

Upvotes: 0

Views: 2880

Answers (4)

kaleazy
kaleazy

Reputation: 6242

I really recommend the jQuery CountUp plugin. I tried a number of Javascript counters and this was one of the easiest to implement and came with lots of goodies:

<script type="text/javascript">
    $(document).ready(function(){
        $('#counter').countUp({
            'lang':'en', 'format':'full', 'sinceDate': '22/07/2008-00::00';
        });
    });
</script>        

<div id="counter"></div>

Upvotes: 0

Paula Bean
Paula Bean

Reputation: 458

Your "i" variable needs to be an integer. You can format it how you like when you want to print it somewhere.

$(document).ready(function() {
    var i = 0;
    var target = $('.counter');
    var timer = function doSomething ( )
    {
        i++;

        var output = pad(i,4);
        target.text(output);
        console.log(output);

    }
    setInterval (timer, 1000 );
});


    function pad(number, length) {

        var str = '' + number;
        while (str.length < length) {
            str = '0' + str;
        }
        return str;

    }​

Upvotes: 3

benekastah
benekastah

Reputation: 5711

I would do something more like this:

// Make sure Date.now exists in your environment
Date.now = Date.now || function () { return Number(new Date()); };

var time = 0,
start = Date.now(),
intervalId;

intervalId = setInterval(function () {
  var seconds, display;
  // get the exact time since the timer was started
  time = Date.now() - start;
  // get the number or seconds, rounded down
  seconds = Math.floor(time / 1000);
  display = '' + seconds;

  // pad the beginning of your display string with zeros
  while (display.length < 4) {
    display = "0" + display;
  }
  console.log(display);
}, 100);

setInterval is not exact. This code ensures that while the display could be up to nearly a second off (in theory), the actual time you are tracking is always the exact amount of time that has elapsed since you started the timer. But this code would update the display about once every tenth of a second, so it's not likely to ever be off more than a few milliseconds.

From here you can figure out smarter ways to update the display to ensure you have the level of accuracy you need. If this needs to be pretty accurate, then you could make sure you are displaying to the tenth of the second.

Upvotes: 0

Robert
Robert

Reputation: 21388

Your current code is appending to a string, not addition to a number. It essentially looks like

i = '0000' + 1, i = '00001' + 1, i = '000011' + 1 ...

and so on. You'll need to keep it integer based to continue adding to the number. Here's an example with the formatting it looks like you wanted.

var pad = function(n) { return (''+n).length<4?pad('0'+n):n; };

jQuery.fn.timer = function() {
    var t = this, i = 0;
    setInterval(function() {
        t.text(pad(i++));
    }, 1000);
};

$('#timer').timer();

http://jsfiddle.net/jDaTK/

Upvotes: 1

Related Questions