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.

How to use it:

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

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous"></script>
<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.

$('.timer').startTimer();

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

$('.timer').startTimer({
  onComplete: function(element){
    // do something...
  }
})

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

$('.timer').startTimer({
  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.

$('.timer').startTimer({
  loop: true,
  loopInterval: 3
});

Changelog:

2019-07-23

• Pass onComplete upon resume event.

2018-10-31

• Possibility to configure the created element for hours, minutes and seconds.

---

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