Countdown Timer In jQuery That Help You Improve Efficiency

Countdown timers can be used in a wide variety of situations. Whether you are using the countdown on your site to inform people about how much time is left before the holidays, or to update everyone on when a job application will be closing.

In this article, we'll be sharing you with a dead simple countdown timer plugin written in JavaScript (jQuery). Useful for displaying how long is left before an event starts or when a specific time is due. Enjoy.

How to use it:

1. Create a placeholder for the countdown timer.

<p class="counter"></p>

2. Download the plugin and insert the countdowntimer.js after jQuery.

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

3. Initialize the plugin on the countdown placeholder and determine the time the plugin should count down to.

$(function() {
  $('.counter').setCountDownTimer({
     time: "00:01:00", // 1 minute
  });
});

4. Append a custom label to the beginning of the countdown timer.

$(function() {
  $('.counter').setCountDownTimer({
     time: "00:01:00",
     countDownText: 'Remaining time:',
  });
});

5. Set the text to be displayed when the countdown is complete.

$(function() {
  $('.counter').setCountDownTimer({
     time: "00:01:00",
     countDownText: 'Remaining time:',
     afterCountText: 'Time\'s up!',
  });
});

6. Disable an action button when the countdown is complete.

<button class="btn">
  Action Button
</button>

$(function() {
  $('.counter').setCountDownTimer({
     time: "00:01:00",
     countDownText: 'Remaining time:',
     afterCountText: 'Time\'s up!',
     button: $('.button'),
  });
});

---

This awesome jQuery plugin is developed by obzc. For more Advanced Usages, please check the demo page or visit the official website.