jQuery Relative Time Countdown Plugin - text-countdown.js
File Size: | 8.62 KB |
---|---|
Views Total: | 1543 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
text-countdown.js is a simple lightweight jQuery countdown plugin that outputs the remaining time in a human readable format such as 'The sale starts in about 7 days and 12 hours.'.
How to use it:
1. Load jQuery library and the text-countdown.js script in the document.
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script> <script src="js/text-countdown-1.0.1-en-us.js"></script>
2. Specify the target time in UTC you wish to countdown from. All the plugin parameters can be passed in via data-OPTION
attributes as displayed below.
<div class="countdown-timer" data-month="11" data-day="27" data-year="2015" data-hour="00" data-prefix="The Black Friday Sale starts in " data-suffix=". Hooray!" data-delimiter=" and" >Custom message</div>
3. Call the plugin to active the countdown timer.
$('.countdown-timer').textCountdown();
4. This will output the markup structure as follow.
<div class="text-countdown-container"> <span class="text-countdown-prefix">The Black Friday Sale starts in </span> <span class="text-countdown-about">about</span> <span class="text-countdown-days"> <span class="text-countdown-num">xxx</span> <span class="text-countdown-label">days</span> </span> <span class="text-countdown-delimiter">and</span> <span class="text-countdown-remainder"> <span class="text-countdown-num">xx</span> <span class="text-countdown-label">hours</span> </span> <span class="text-countdown-suffix">. Hooray!</span> </div>
5. All the default plugin parameters.
classPrefix: '', prefix: '', suffix: '', delimiter: '', hour: 0, minute: 0, second: 0
This awesome jQuery plugin is developed by ddcast. For more Advanced Usages, please check the demo page or visit the official website.