Lightweight Feature-rich Timer Plugin - jQuery tinytimer

A lightweight yet feature-rich jQuery timer plugin created for easily managing timers within your projects.

The tinytimer plugin allows you to save and restore timer instances as needed. It ensures that your timers keep tracking even if your computer is turned off.

Additionally, the plugin also supports dynamic counter updates, customizable time formats, and basic onTick() and onTargetReached() event handlers.

How to use it:

1. Download and load the minified version (~2.5kb) of the tinytimer plugin in the document.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/dist/jquery.tinytimer.min.js"></script>

2. Create a new timer instance.

<div class="jt-counter">
  Counter!
</div>

const myTimer = $(".jt-counter").timer();

3. Available options to customize the timer.

$(".jt-counter").timer({

  // initial value
  timerCounter: 0,

  // target value
  timerTarget: 0,

  // tick interval in milliseconds 
  refreshInterval: 1000,

  // formatter function
  updateHtml: function() {
    // using getTimezoneOffset makes this work with all timezones
    var d = new Date( "Thu Jan 01 1970 00:00:00" );
    var f = new Date( this.counter + d.getTimezoneOffset() * 60000 );
    this.html(
      ( "0" + ( ( f.getDate() - 1 ) * 24 + f.getHours() ) ).substr( -2 ) + ":" +
      ( "0" + ( f.getMinutes() ) ).substr( -2 ) + ":" +
      ( "0" + ( f.getSeconds() ) ).substr( -2 )
    );
  },

});

4. Event handlers.

$(".jt-counter").timer({

  onTargetReached: function() {
    // do something here
  },
  
  onTick: function() {
    console.log(
      "Counter value: " +   this.counter + "\n" +
      "Target: " +          this.target + "\n" +
      "Is Running: " +      this.enabled + "\n" +
      "Current history: " + JSON.stringify(this.history)
    );
  }

});

5. Available methods to manage the timer.

// start
myTimer.start();

// stop
myTimer.stop();

// reset
myTimer.zero();

// destroy
myTimer.destroy();

// remove
myTimer.remove();

// update
myTimer.counter = 60*1000;

---

This awesome jQuery plugin is developed by narduz86. For more Advanced Usages, please check the demo page or visit the official website.