jQuery Plugin for a Showing Animated Countdown Timer | showTimer

showTimer is a jQuery plugin for creating a countdown timer in two different formats. which is descending to a specific date that you specify in the HTML data attribute.

Must Read: Circular Countdown Timer Javascript/Codepen | Timer JS

How to make use of it:

1. To use this countdown timer plugin, include the JavaScript showTimer.min.js library.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/src/showTimer.min.js"></script>

2. Create a container item for the countdown timer.

<div id="myCountdown">
  EXPIRES IN 
  <span id="example" 
    data-start="2021-01-01T00:00:00" 
    data-end="2021-12-25T00:00:00" >
  </span>
</div>

3. Call the showTimer function on the countdown item.

$('#example').showTimer({
  wrapper_id: "myCountdown"
});

4. Displays days, hours, minutes, and seconds in customizable templates.

<div id="myCountdown">
  EXPIRES IN 
  <div id="example" 
    data-start="2021-01-01T00:00:00" 
    data-end="2021-12-25T00:00:00" >
  </div>
</div>

$('#example').showTimer({
  returnType: 'box',
  wrapper_id: "myCountdown"
});

/* Custom Box Styles */
.countdown_box {
  color: #fff;
  background-color: #4F46E5;
  border: 1px solid black;
  border-radius: 5px;
  display: inline-block;
  margin-right: 5px;
  padding: 3px;
  text-align: center;
  width: 80px;
}

5. Change the time zone of the countdown timer.

<div id="myCountdown">
  EXPIRES IN 
  <div id="example" 
    data-start="2021-01-01T00:00:00" 
    data-end="2021-12-25T00:00:00"
    data-timezone="-09:00">
  </div>
</div>

// Or via JavaScript
$('#example').showTimer({
  wrapper_id: "myCountdown",
  timeZone: "-09:00",
});

6. Localization of the countdown.

// Or via JavaScript
$('#example').showTimer({
  wrapper_id: "myCountdown",
  local_s_days: "d",
  local_s_hrs: "h",
  local_s_min: "m",
  local_s_sec: "s",
  local_l_days: "DAYS",
  local_l_hrs: "HRS",
  local_l_min: "MIN",
  local_l_sec: "SEC",
});

Parameters

In $().showTimer()

1. returnType: either “text” or “box” (default: text)
2. timeZone: javascript timezone (default +00:00)
3. wrapper_id: The wrapper ID or class name of the wrapper that will be hidden when the timer hits zero. (if ‘.’ or ‘#’ is not present, it is prepended by ‘#’)
4. timesup_wrapper_id: The ID or class name of the element to be shown when the timer hits zero. (if ‘.’ or ‘#’ is not present, it is prepended by ‘#’)
5. noshow_wrapper_id: The ID or class name of the element to be shown when (on page load), it is before start time or after end time (and the timer is hidden).
6. local_s_days: the abbreviation of ‘days’ in the target language (default “d”) used in the text format
7. local_s_hrs: the abbreviation of ‘hours’ in the target language (default “h”) used in the text format
8. local_s_min: the abbreviation of ‘minutes’ in the target language (default “m”) used in the text format
9. local_s_sec: the abbreviation of ‘seconds’ in the target language (default “s”) used in the text format
10. local_l_days: the word ‘DAYS’ in the target language (default “DAYS”) used in the box format
11. local_l_hrs: the word ‘HOURS’ in the target language (default “HRS”) used in the box format
12. local_l_min: the word ‘MINUTES’ in the target language (default “MIN”) used in the box format
13. local_l_sec: the word ‘SECONDS’ in the target language (default “SEC”) used in the box format

In data- attribute

1. data-timezone: javascript timezone (default +00:00)
2. data-start: timestamp of the starting point of the countdown
3. data-end: timestamp of the ending point of the countdown
4. data-return-type: either “text” or “box”
5. data-wrapper-id: The wrapper ID or class name of the wrapper that will be hidden when the timer hits zero. (if ‘.’ or ‘#’ is not present, it is prepended by ‘#’)
6. data-timesup-wrapper-id: The ID or class name of the element to be shown when the timer hits zero. (if ‘.’ or ‘#’ is not present, it is prepended by ‘#’)
7. data-noshow-wrapper-id: The ID or class name of the element to be shown when (on page load), it is before start time or after end time (and the timer is hidden).

See Demo And Download

Official Website(lee-ratinan): Click Here

This superior jQuery/javascript plugin is developed by lee-ratinan. For extra Advanced Usage, please go to the official website.

Tags: countdowncountdown timercountdown timer jqueryjs countdownlee-ratinanshowTimer