Lightweight Event-based jQuery Countdown Timer Plugin - vtimer

vtimer is a very small (~2kb) and cross browser jQuery plugin used to generate customizable, event-based countdown timers on the webpage.

How to use it:

1. Include both jQuery library and the jQuery vtimer plugin's script on the webpage.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.vtimer.js"></script>

2. Create DIV containers to place your countdown timers.

<div id="one"></div>
<div id="two"></div>

3. Generate a basic countdown timer inside the #1 container that will countdown from 10 seconds and display the remaining time on each update. It will also generate another countdown timer inside the #2 container that will auto start when the #1 countdown timer is complete.

$('#one').vTimer('start', {duration: 10})
.on('update', function (e, remaining) {
  $('#one').text('One: ' + remaining);
})
.on('complete', function () {
  $('#one').text('One: complete');
  $('#two').vTimer('start', {duration: 5})
    .on('update', function (e, remaining) {
      $('#two').text('Two: ' + remaining);
    })
    .on('complete', function () {
      $('#two').text('Two: complete');
    });
});

4. All API methods.

// start the timer
$('#el').vTimer('start');

// stop the timer
$('#el').vTimer('stop');

// cancel the timer
$('#el').vTimer('cancel');

Change log:

2016-10-01

• JS update

---

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