Countdown

A JavaScript widget to display a countdown (or timer).

How to

The countdown widget allows you to easily embed a countdown (or timer) in your website pages.

To use the component as a timer, you can set the data-timer attribute equal to the number of seconds you want to count:

<div class="countdown js-countdown" data-timer="104400">
  <!-- ... -->
</div>

If you want to use the widget as a countdown instead, set the data-countdown attribute equal to the countdown date:

<div class="countdown js-countdown" data-countdown="2020-03-10T20:59:00.000+00:00">
  <!-- ... -->
</div>

Here's the format you can use for your countdown date:

yyyy-mm-ddThh:mm:ss.sss+HH:00

where:

• T is the separator between date and time (no need to modify it);
• +HH:00 (or -HH:00) is the timezone; for example, use +00:00 for GMT.

If you need to show an alert message when the count is over, you can use the countDownFinished event.
Here's a simple example of how to use this event:

document.getElementsByClassName('js-countdown')[0].addEventListener('countDownFinished', function(){
  // show your alert here
});

Labels #

By default labels (e.g., minutes, seconds...) won't be visible. You can add labels to the countdown using the data-labels attribute. You can pass the labels as a list of comma-separated values. For example, in the --label variation, we set data-labels='D, H, M, S'.

To increase/decrease the size of the text elements, you can apply one of the .text-{size} classes to the component (check the --labels variation for an example of how to do that).

By default, only labels with a value different from 0 will be shown. For example, if there are only 5 hours left, the days' label won't be shown.

You can use the data-visible-labels attribute to specify the list of labels that you always want to be visible (event if equal to zero). You can pass a list of comma-separated values; for example, if you always want to show all the labels, set data-visible-labels='d, h, m, s'.

<div class="countdown js-countdown" data-countdown="2020-03-10T20:59:00.000+00:00" data-visible-labels="d, m, h, s">
  <!-- ... -->
</div>

Dynamic Content #

If your countdown is created dynamically, you may need to initialize it (once it has been added to the page) to make it work properly.

Once the dynamic content has been added to the page, initialize it using the CountDown object:

var countdown = document.getElementsByClassName('countdown')[0];
new CountDown(countdown);

Categories

• Plugins > Misc

Bug report & feedback

Component Github page ↗