jQuery-backward-timer examples

dir-timer.js

$.backward_timer
    methods: Object
        _check_leading_zero: function (number) { ...
        _is_exhausted: function() { ...
        _on_tick: function (previous_delay) { ...
        _render_seconds: function () { ...
        _seconds_to_dhms: function (seconds) { ...
        cancel: function () { ...
        init: function (options) { ...
        reset: function () { ...
        start: function () { ...
    seconds_left: 0
    settings: Object
        format: "h%:m%:s%"
        on_start: function (timer) { ...
        on_cancel: function (timer) { ...
        on_exhausted: function (timer) { ...
        on_tick: function (timer) { ...
        seconds: 5
        step: 1
        stop_at_zero: true
        value_setter: "text"
    target: e.fn.e.init[1]
        0: span#timer_1.timer
        context: span#timer_1.timer
        length: 1
    timeout: undefined

example-custom-step.js

$('#timer_custom_step').backward_timer({
  seconds: 60,
  step: 5
})

example-custom-timeout.js

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

example-default.html

<div class='timer-block'>
  <div class='controls'>
    <a href="javascript:void(0)" class="button button-start" id='start_default'>Start</a>
    <a href="javascript:void(0)" class="button button-cancel" id='cancel_default'>Cancel</a>
    <a href="javascript:void(0)" class="button button-reset" id='reset_default'>Reset</a>
  </div>
  <span id='timer_default' class='timer'>value placeholder</span>
</div>

<script type="text/javascript">
$(document).ready(function(){

  $('#timer_default').backward_timer()

  $('#start_default').click(function() {
    $('#timer_default').backward_timer('start')
  })
  $('#cancel_default').click(function() {
    $('#timer_default').backward_timer('cancel')
  })
  $('#reset_default').click(function() {
    $('#timer_default').backward_timer('reset')
  })
  
})
</script>

example-on-cancel.js

$('#timer_on_cancel').backward_timer({
  on_cancel: function(timer) {
    var node = $("<span>", {text: 'Timer was cancelled', class: 'dynamic'})
    timer.target.after(node)
    node.fadeOut(1500, function() {
      node.remove()
    })
  }
})

example-on-exhausted.js

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

example-on-start.js

$('#timer_on_start').backward_timer({
  on_start: function(timer) {
    var node = $("<span>", {text: 'Timer has started', class: 'dynamic'})
    timer.target.after(node)
    node.fadeOut(1500, function() {
      node.remove()
    })
  }
})

example-on-tick.js

$('#timer_on_tick').backward_timer({
  on_tick: function(timer) {
    var color = ((timer.seconds_left % 2) == 0)
                ? "#F82828"
                : "#009CFF"
    timer.target.css('color', color)
  }
})

example-output-format-1.js

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

example-output-format-2.js

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

example-output-format-3.js

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

example-simple.html

<span id='timer_simple_1'></span>
<div id='timer_simple_2'></div>
<input id='timer_simple_3'></input>

example-simple.js

$('#timer_simple_1').backward_timer()
$('#timer_simple_2').backward_timer()
$('#timer_simple_3').backward_timer()

example-stop-at-zero.js

$('#timer_stop_at_zero').backward_timer({
  stop_at_zero: false
})

include-script.html

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