Minimal Countdown Plugin With jQuery And Moment.js - downtime-timer
| File Size: | 4.09 KB |
|---|---|
| Views Total: | 11417 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
downtime-timer is a very small jQuery plugin used to create a countdown timer with timezone support for coming soon / under construction pages. Based on the famous Moment.js JavaScript library.
How to use it:
1. Link to jQuery library and other required resources as follows:
<script src="/path/to/jquery.min.js"></script> <script src="/path/to/moment.js"></script> <script src="/path/to/moment-timezone-with-data.js"></script>
2. Download and place the downtine-timer plugin after jQuery library.
<script src="timer.js"></script>
3. Build the html structure for the countdown timer.
<div class="clock">
<div class="column days">
<div class="timer" id="days"></div>
<div class="text">DAYS</div>
</div>
<div class="timer days">:</div>
<div class="column">
<div class="timer" id="hours"></div>
<div class="text">HOURS</div>
</div>
<div class="timer">:</div>
<div class="column">
<div class="timer" id="minutes"></div>
<div class="text">MINUTES</div>
</div>
<div class="timer">:</div>
<div class="column">
<div class="timer" id="seconds"></div>
<div class="text">SECONDS</div>
</div>
</div>
4. Configuration options.
var config = {
endDate: '2016-05-19 09:00',
timeZone: 'Europe/Dublin',
hours: $('#hours'),
minutes: $('#minutes'),
seconds: $('#seconds')
};
This awesome jQuery plugin is developed by jonny981. For more Advanced Usages, please check the demo page or visit the official website.










