This time I will share jQuery Plugin and tutorial about Countdown From A Date To Another Date – jQuery PsgTimer, hope it will help you in programming stack.
PsgTimer is an easy, modern, cross-browser countdown timer plugin for creating a digital clock that counts down from a date to another date you provide.
How to use it:
1. To get started, include the jQuery PsdTimer plugin and other required resources on the web page.
1 |
<link rel="stylesheet" href="css/psgTimer.css"> |
3 |
integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" |
4 |
crossorigin="anonymous"> |
6 |
<script src="js/jquery.psgTimer.js"></script> |
2. Create a placeholder element for the countdown timer and specify the end time in the data-timer-end attribute:
2 |
data-timer-end="24.12.2019 23:59 UTC-04:45"> |
3. Call the plugin to the placeholder element. Done.
1 |
var myTimer = new PsgTimer('#demo'); |
4. You can also specify the end time in the JavaScript during init.
1 |
var myTimer = new PsgTimer('#demo',{ |
2 |
endDateTime: Date.UTC(2019, 12, 24, 0, 0, 0), |
5. Stop/stop the countdown timer manually.
6. Specify the start date. Default: current local time.
1 |
var myTimer = new PsgTimer('#demo',{ |
2 |
currentDateTime: Date.UTC(2018, 12, 24, 0, 0, 0), |
7. Enable the tick animation. Default: false.
1 |
var myTimer = new PsgTimer('#demo',{ |
8. Decide whether to display the days, hours, minutes, and seconds in different slots. Default: false.
1 |
var myTimer = new PsgTimer('#demo',{ |
9. Localize the countdown timer.
3 |
data-label-hours="Hours" |
4 |
data-label-minutes="Minutes" |
5 |
data-label-seconds="Seconds" |
2 |
var myTimer = new PsgTimer('#demo',{ |
10. Callback functions available.
01 |
var myTimer = new PsgTimer('#demo',{ |
04 |
onStart: function () { |
10 |
onChangeStart: function () { |
12 |
onChangeEnd: function () { |
This awesome jQuery plugin is developed by ProsteerGroup. For more Advanced Usages, please check the demo page or visit the official website.
