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.