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

Simple Countdown Timer Plugin With jQuery - simple.timer.js
File Size: 43.1 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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:

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.