Countdown From A Date To Another Date - jQuery PsgTimer
File Size: | 7.7 KB |
---|---|
Views Total: | 4353 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.
See also:
How to use it:
1. To get started, include the jQuery PsdTimer plugin and other required resources on the web page.
<link rel="stylesheet" href="css/psgTimer.css"> <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"> </script> <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:
<div id="demo" data-timer-end="24.12.2019 23:59 UTC-04:45"> </div>
3. Call the plugin to the placeholder element. Done.
var myTimer = new PsgTimer('#demo');
4. You can also specify the end time in the JavaScript during init.
<div id="demo"> </div>
var myTimer = new PsgTimer('#demo',{ endDateTime: Date.UTC(2019, 12, 24, 0, 0, 0), });
5. Stop/stop the countdown timer manually.
// starts the countdown timer myTimer.start(); // stops the countdown timer myTimer.stop();
6. Specify the start date. Default: current local time.
var myTimer = new PsgTimer('#demo',{ currentDateTime: Date.UTC(2018, 12, 24, 0, 0, 0), });
7. Enable the tick animation. Default: false.
var myTimer = new PsgTimer('#demo',{ animation: 'fade' });
8. Decide whether to display the days, hours, minutes, and seconds in different slots. Default: false.
var myTimer = new PsgTimer('#demo',{ multilpeBlocks: true });
9. Localize the countdown timer.
<div id="psgTimer" data-label-days="Days" data-label-hours="Hours" data-label-minutes="Minutes" data-label-seconds="Seconds" ></div>
// or var myTimer = new PsgTimer('#demo',{ labels: { days: 'Days', hours: 'Hours', minutes: 'minutes', seconds: 'seconds' } });
10. Callback functions available.
var myTimer = new PsgTimer('#demo',{ onInit: function () { }, onStart: function () { }, onStop: function () { }, onEnd: function () { }, onChangeStart: function () { }, onChangeEnd: function () { } });
This awesome jQuery plugin is developed by ProsteerGroup. For more Advanced Usages, please check the demo page or visit the official website.