Basic Timer Question

Basic Timer Question


Hi all -

Bit of a newbie here, so apologies for the stupid q - hopefully this one is easily solved.

I'm trying to do add 4 countdown boxes to a website - I can find scripts for basic countdowns, but can't get it so that it has 4 on the one page as I'm really new to jquery. For example, I'd like to have 4 spans, (timer, timer2, timer 3 etc)

This is the code i have:

HTML:
  1. <span class="timer"></span>
  2. <hr/>
  3. <span id="help">From: 50 - To: 2500 / Over 5000 Milli-Seconds</span>

JS:

  1. (function($) {
  2.     $.fn.countTo = function(options) {
  3.         // merge the default plugin settings with the custom options
  4.         options = $.extend({}, $.fn.countTo.defaults, options || {});

  6.         // how many times to update the value, and how much to increment the value on each update
  7.         var loops = Math.ceil(options.speed / options.refreshInterval),
  8.             increment = (options.to - options.from) / loops;

  10.         return $(this).each(function() {
  11.             var _this = this,
  12.                 loopCount = 0,
  13.                 value = options.from,
  14.                 interval = setInterval(updateTimer, options.refreshInterval);

  16.             function updateTimer() {
  17.                 value += increment;
  18.                 loopCount++;
  19.                 $(_this).html(value.toFixed(options.decimals));

  21.                 if (typeof(options.onUpdate) == 'function') {
  22.                     options.onUpdate.call(_this, value);
  23.                 }

  25.                 if (loopCount >= loops) {
  26.                     clearInterval(interval);
  27.                     value = options.to;

  29.                     if (typeof(options.onComplete) == 'function') {
  30.                         options.onComplete.call(_this, value);
  31.                     }
  32.                 }
  33.             }
  34.         });
  35.     };

  37.     $.fn.countTo.defaults = {
  38.         from: 0,  // the number the element should start at
  39.         to: 100,  // the number the element should end at
  40.         speed: 1000,  // how long it should take to count between the target numbers
  41.         refreshInterval: 100,  // how often the element should be updated
  42.         decimals: 0,  // the number of decimal places to show
  43.         onUpdate: null,  // callback method for every time the element is updated,
  44.         onComplete: null,  // callback method for when the element finishes updating
  45.     };
  46. })(jQuery);

  48. jQuery(function($) {
  49.         $('.timer').countTo({
  50.             from: 50,
  51.             to: 2500,
  52.             speed: 5000,
  53.             refreshInterval: 50,
  54.             onComplete: function(value) {
  55.                 console.debug(this);
  56.             }
  57.         });
  58.     });


Many thanks!