Simple.Timer by caike

Usage

Basic example:

Source code:

<div class="timer" data-seconds-left=65></div>

<script src="jquery.js"></script>
<script src="jquery.simple.timer.js"></script>
<script>
  $(function(){
    $('.timer').startTimer();
  });
</script>
<style>
  .timer, .timer-done, .timer-loop {
    font-size: 30px;
    color: black;
    font-weight: bold;
    padding: 10px;
  }

  // These are the default CSS classes
  // used by this plugin. Use these values
  // for a basic style to get started.
  .jst-hours {
    float: left;
  }
  .jst-minutes {
    float: left;
  }
  .jst-seconds {
    float: left;
  }
  .jst-clearDiv {
    clear: both;
  }
  .jst-timeout {
    color: red;
  }
</style>

Options

Use the onComplete option for custom behavior on timeout:

Source code:

$('.timer').startTimer({
  onComplete: function(element){
    element.addClass('is-complete');
  }
});

Use the loop and loopInterval (in seconds) for infinite loop:

Source code:

$('.timer').startTimer({
  onComplete: function(element){
    element.addClass('is-complete');
  },
  loop: true,
  loopInterval: 3,
});

For more options, see examples

Tests

QUnit tests can be found in tests/index.html.