Simple jQuery Relative Time Countdown Plugin | text-countdown.js

text-countdown.js is a simple jQuery relative countdown plugin that outputs the remaining time in a readable format and starts selling in about 7 days 12/24 hours.

How to make use of it:

1. Load the jQuery library and the countdown.js script into 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. Select the target time in UTC that you wish to count down from.

<div class="countdown-timer"
  data-month="10"
  data-day="24"
  data-year="2021"
  data-hour="00"
  data-prefix="The Black Friday Sale starts in "
  data-suffix=". Hooray!"
  data-delimiter=" and"
>Custom message</div>

3. Call the plug-in to activate the countdown timer.

$('.countdown-timer').textCountdown();

4. This will output the markup structure as follows.

<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 plugin parameters are default.

classPrefix: '',
prefix: '',
suffix: '',
delimiter: '',
hour: 0,
minute: 0,
second: 0

jQuery Relative Time Countdown, text-countdown.js Plugin/Github, round countdown timer jquery


See Demo And Download

Official Website(ddcast): Click Here

This superior jQuery/javascript plugin is developed by ddcast. For extra advanced usage, please go to the official website.

Share