Simple Countdown Timer Plugin With jQuery - simple.timer.js

Simple Countdown Timer Plugin With jQuery - simple.timer.js

simple.timer.js is a simple jQuery countdown timer plugin with the ability to execute a callback function for custom behavior on timeout.

1. Link to the necessary jQuery library and jquery.simple.timer.js.

<script src="" 
<script src="jquery.simple.timer.js"></script>

2. Create an element for the countdown timer and specify the duration in minutes and/or seconds in the data attribute:

<h1 class='timer' data-minutes-left=1></h1>
<h1 class='timer' data-seconds-left=30></h1>

3. The JavaScript to start the countdown timer.


4. Execute a function when the countdown timer is completely finished.

  onComplete: function(element){
    // do something...

5. The default CSS classes that enables you to style the countdown timer in the CSS.

  classNames: {
    hours: 'myClass-hours',
    minutes: 'myClass-minutes',
    seconds: 'myClass-seconds',
    clearDiv: 'myClass-clearDiv',
    timeout: 'myClass-timeout'

6. In some cases you might need a loop countdown timer.

  loop: true,
  loopInterval: 3

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

  • Publication date: 04.03.2018
  • Source