Press "Enter" to skip to content

Simple Multi Countdown Timer Plugin Using Javascript/JQuery

Simple countdown timer plugin for jQuery that displays the number of days/hours/minutes/seconds remaining until the next event like meetings, schedules, specials, etc.

Simple JQuery plugin for all countdown requirements. Really easy to implement and with all the important features.

Key Features:

  • Multiple instances on the same page
  • No initialization needed
  • Two entry modes, one for the very simple countdown, the other for cases that require more CSS.
  • Pluralization
  • Time zones
  • Timer setting
  • Zero paddings are configurable

How to make use of it:

1. To start with, load the primary JavaScript multi-countdown.js after the jQuery library.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/multi-countdown.js"></script>

2. Create a primary countdown, determine the date you’d prefer to countdown in the direction of the text to show when the countdown is ended.

<div data-Date='2020/12/24 23:59:59' data-endText="Offer ended">
  (days) p_days, (hours) p_hours, and (minutes) p_minutes left!
</div>
// output
200 Days, 05 Hours, and 49 Minutes left!

3. Create a digital countdown clock with the next HTML markups.

<div data-Date='2020/12/24 23:59:59'>
  <h2 class="text-center">Special Offer</h2>
  <div class="running">
    <timer>
      <span class="days"></span>:<span class="hours"></span>:<span class="minutes"></span>:<span class="seconds"></span>
    </timer>
    <div class="labels"><span>Days</span><span>Hours</span><span>Minutes</span><span>Seconds</span></div>
    <div class="text">Offer Ended</div>
    <button>Buy Now!</button>
  </div>
  <div class="ended">
    <div class="text">Offer is ended</div>
    <button>Suscribe for next event!</button>
  </div>
</div>

4. You’re additionally allowed to create a countdown timer by defining a fixed time within the data-fixTime.

<div data-fixTime='{"Days": "3", "Hours": "2", "Minutes": "10"}' data-endText="Offer ended">
  (days) p_days, (hours) p_hours, (minutes) p_minutes and (seconds) p_seconds left!
</div>
// output
03 Days, 01 Hour, 48 Minutes and 58 Seconds left!

5. Create a countdown timer with configurable 0 Padding.

<div data-fixTime='{"Days": "3", "Hours": "1", "Minutes": "10"}' data-endText="Offer ended" data-zeroPad='{"Days": "false"}'>
  (days) p_days - (hours):(minutes):(seconds) left!
</div>
// output
3 Days - 00:46:47 left!

Minimal Event Countdown Timer Plugin, javascript countdown timer seconds, JS/JQuery Multi Countdown Plugin/Github


See Demo And Download

Official Website(pablog1): Click Here

This superior jQuery/javascript plugin is developed by pablog1. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *