
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="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 });
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