Minimal Countdown Plugin With jQuery And Moment.js - downtime-timer

File Size: 4.09 KB
Views Total: 11375
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Minimal Countdown Plugin With jQuery And Moment.js - downtime-timer

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.