jQuery Full Controllable Countdown Timer Plugin - Backward Timer

Backward Timer is a tiny jQuery plugin for creating a fully controllable countdown timer that runs backwards till it goes 00:00:00 where it will trigger a callback function.

Features:

• 3 methods to start, pause and cancel a timer.
• Custom time & output format.
• Allows to handle timer's events of ticking and exhausting.

Basic Usage:

1. Include the jQuery javascript library and jQuery Backward Timer plugin in your document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="lib/jquery-backward-timer.min.js"></script>

2. Create a container for the countdown timer.

<span id="demo" class="timer">value placeholder</span>

3. Create some buttons to control the countdown timer.

<a href="javascript:void(0)" id='start_control'>Start</a>
<a href="javascript:void(0)" id='cancel_control'>Cancel</a>
<a href="javascript:void(0)" id='reset_control'>Reset</a>

4. Initialize the plugin.

<script type="text/javascript">
$('#demo').backward_timer()

$('#start_control').click(function() {
  $('#demo').backward_timer('start')
})
$('#cancel_control').click(function() {
  $('#demo').backward_timer('cancel')
})
$('#reset_control').click(function() {
  $('#demo').backward_timer('reset')
})
</script>

5. All the default settings.

$('#demo').backward_timer({

// specify timer's timeout value
seconds: 5, 

// timer's step (in seconds)
step: 1,

value_setter: undefined,

// Set output format
format: 'd%d h%:m%:s%', 

// Handle event of exhausting
on_exhausted: function(timer) {}, 

// Handle tick events
on_tick: function(timer) {} 
})

Change logs:

2015-02-19

• allow timer to count below zero

2014-12-25

• add support for timer step

---

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