This time I will share jQuery Plugin and tutorial about Minimalist jQuery Countdown Timer Plugin – countdown.js, hope it will help you in programming stack.
countdown.js is an ultra-light jQuery countdown timer plugin which counts down from a specific date and injects countdown elements (ie, days, hours, minutes) into selected elements for easier styling.
How to use it:
1. Put jQuery library and the countdown.js script at the end of the html document.
1 |
< script src = "//code.jquery.com/jquery.min.js" ></ script > |
2 |
< script src = "countdown.js" ></ script > |
2. The basic HTML structure for the countdown timer.
2 |
< span class = "years" ></ span > years |
3 |
< span class = "days" ></ span > days |
4 |
< span class = "hours" ></ span > hours |
5 |
< span class = "mins" ></ span > minutes |
6 |
< span class = "secs" ></ span > Seconds |
3. Call the function on the top container and specify the date you wish to countdown from.
1 |
$( '#countdown' ).countdown({ |
2 |
date: '5 september 2020 23:5' |
4. Execute a callback function when the countdown timer is finished.
1 |
$( '#countdown' ).countdown({ |
2 |
date: '5 september 2020 23:5' |
4 |
$( '#countdown' ).text( 'we are live' ); |
This awesome jQuery plugin is developed by sagar290. For more Advanced Usages, please check the demo page or visit the official website.