Minimal Countdown Plugin With jQuery And Moment.js - downtime-timer
File Size: | 4.09 KB |
---|---|
Views Total: | 11301 |
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.