Plain Text Countdown Timer with jQuery and Moment.js - Countdown Clock
File Size: | 11.7 KB |
---|---|
Views Total: | 5765 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Countdown Clock is a small plain jQuery countdown timer plugin which counts down in years, months, days, hours, minutes, seconds to a given date.
How to use it:
1. Load the necessary jQuery library and moment.js in your document.
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script src="moment.min.js"></script>
2. Download and load the jQuery countdown clock plugin after jQuery.
<script src="countdown-clock.min.js"></script>
3. Create an empty container for the countdown timer.
<div id="countdown-clock"></div>
4. Initialize the countdown timer and specify the date you wish to count down to.
$('#countdown-clock').countdownClock({date: '2025-06-16'});
5. This will generate a plain text countdown timer with the following markup into the container you just created. So you can easily to style it whatever you like.
<div id="countdown-clock"> <div class="countdown-clock"> <span class="years"></span> Years <span class="months"></span> Months <span class="days"></span> Days <span class="hours"></span> Hours <span class="minutes"></span> Minutes <span class="seconds"></span> Seconds </div> </div>
.countdown-clock { ... } .countdown-clock .years, .countdown-clock .months, .countdown-clock .days, .countdown-clock .hours, .countdown-clock .minutes, .countdown-clock .seconds { ... } .countdown-clock span:first-of-type { ... }
6. The default options.
dateFormat: "YYYY-MM-DD", date: undefined, showYears: false, showMonths: true, showDays: true, showHours: true, showMinutes: true, showSeconds: true, updateInterval: 1, // Seconds, containerClass: 'countdown-clock', containerTag: 'div'
This awesome jQuery plugin is developed by Zawntech. For more Advanced Usages, please check the demo page or visit the official website.