jQuery Backward Timer Plugin Examples

Default

By default, timer has a timeout of 5 seconds, output format is 'H:MM:SS' and initial value is the representation of the initial timeout.

If you have cancelled the timer, you can resume it by starting it again.

When the timer is exhaused and you need to rerun it, reset it first. You can also reset the timer while it is running.

The source code for the example above is listed below. Take a look at timer's initialization at the line #10.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

<div class='timer_block'>
  <div class='controls'>
    <a href="javascript:void(0)" class="start_btn" id='start_0'>Start</a>
    <a href="javascript:void(0)" class="cancel_btn" id='cancel_0'>Cancel</a>
    <a href="javascript:void(0)" class="reset_btn" id='reset_0'>Reset</a>
  </div>
  <span id='timer_0' class='timer'>value placeholder</span>

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

    $('#start_0').click(function() {
      $('#timer_0').backward_timer('start')
    })
    $('#cancel_0').click(function() {
      $('#timer_0').backward_timer('cancel')
    })
    $('#reset_0').click(function() {
      $('#timer_0').backward_timer('reset')
    })
  </script>
</div>

Setting timeout value

To specify timer's timeout value, pass an object with 'seconds' attribure to the initialization function:

$('#timer_1').backward_timer({
  seconds: 45296
})

See an example:

Setting output format

By default, timer's output format is 'h%:m%:s%', which results in displaying hours without leading zero, minutes and seconds with leading zero, all separated by colons.

If timer's timeout has days, then they will be converted to hours, e.g.

$('#timer_3').backward_timer({
  seconds: 1417539
})

will result into:

If you want to display days explicitly, then you have to change output format. Days pluralization is up to you. Below you can see the initialization of the same timer as above, but with another output format for handling days. Hours will have leading zero now.

$('#timer_4').backward_timer({
  seconds: 1417539
  , format: 'd%d h%:m%:s%'
})

Actually, you may use any format and set placeholders for time intervals in any order:

$('#timer_5').backward_timer({
  seconds: 1417539
  , format: '{s% sec} [h% h] |d% d| <m% min>'
})

Handling event of exhausting

Very probably, you will want to do some action, when your timer is exhausted. To make so, you can set 'on_exhausted' callback function during plugin's initialization:

$('#timer_6').backward_timer({
  on_exhausted: function(timer) {
    timer.target.text('I am exhausted. Reset me!')
  }
})

Callback function accepts 'timer' argument, which is an instance of timer plugin. Its properties will be discussed later. Now note, that it can access 'target' property, which in this case is equal to calling $('#timer_6').

Handling tick events

If you need to perform some action on each tick, while your timer is working, you can set a callback for that event as well.

$('#timer_7').backward_timer({
  on_tick: function(timer) {
    var color = ((timer.seconds_left % 2) == 0)
      ? "#F00"
      : "#00F"
    timer.target.css('color', color)
  }
})

This will change color of the timer's value each second. Give it a try:

Callback input arguments

As you may noticed, callback functions have 'timer' as an input argument. It is an instance of the plugin applied to your element, which was created during plugin's initialization. If you dir its attributes (e.g., via 'console.dir(timer)') you will see all the guts of the plugin:

$.backward_timer
    methods: Object
        _check_leading_zero: function (number) { ...
        _on_tick: function (prev_delay) { ...
        _render_seconds: function () { ...
        _seconds_to_dhms: function (seconds) { ...
        cancel: function () { ...
        init: function (options) { ...
        reset: function () { ...
        start: function () { ...
        __proto__: Object
    seconds_left: 0
    settings: Object
        format: "h%:m%:s%"
        on_exhausted: function (timer) {}
        on_tick: function (timer) {}
        seconds: 5
    __proto__: Object
    target: e.fn.e.init[1]
        0: span#timer_6.timer
        context: span#timer_6.timer
        length: 1
        __proto__: Object[0]
    timeout: undefined
    __proto__: Object

Two of them you are familiar with. They are 'target' and 'seconds_left'. Former is an object the plugin is applied to. As you can see, it is a 'span' element with an ID of '#timer_6' and with style a class 'timer'. Latter is the current value of seconds, which are left before the timer is considered to be exhausted. 'timeout' is the ID of current timer, created by 'setTimeout()' method. 'settings' stores output format, initial amount of seconds to count and a couple of callbacks, which were discussed just in the last two examples. 'methods' objects containes all the public and private methods of the plugin.

So, here you are. At the end of the documentation for backward timer. From now, you may know everything about it. Thanks for reading and good luck with usage!