jQuery Countdown Timer with Minutes & Seconds

Today we are going to build a Countdown timer that shows minutes & Seconds.  We can achieve this by using a simple “FlipTimer” jQuery plugin.

Now you can easily create the count-down or count up from a specified date. It’s a great plugin that is light-weight and responsive.

Furthermore, it works well on a mobile device and as well as on the desktop. You can implement it on any kind of CMS sites such as WordPress or a custom PHP/HTML sites.

All you require to load the plugins files and you are done. That’s it.

The countdown timer is a simple plugin that comes with some of the great features. It allows you to count the number and digits with the ability both up and down.

The plugin provides you configuration option which allows the user to set the values. You simply need to set the days, hours, minutes and seconds in the plugin options and the plugin will start counting it.

Due to its multiple configuration options, it allows the developer to get the desired output and customized it as per your development needed.

Above all, you can perform a specific action after the given time passed. Like you can redirect the user to a specific page or redirect him to a thank you page etc.

How to Create jQuery Countdown Timer with Minutes & Seconds

In the initial step, you need to load the latest version of jQuery into your website/app.

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

After that, you need to add the plugin assets. So let’s load the require CSS and Js files into the head tag.

<link rel="stylesheet" href="css/flipTimer.css">
<script src="js/jquery.flipTimer.js"></script>

Now the important step to create the HMTL markup. Let’s create a div with a class name flipTimer. Remember, we will use this class in the jQuery initializing function.

After that, we will create three child divs. Each one for hours, minutes and seconds.

<div class="flipTimer">
    <div class="hours"></div>
    <div class="minutes"></div>
    <div class="seconds"></div>
</div>

Similar, you can also define a child div for days. Let’s have a look at the markup if you want to show the days.

<div class="flipTimer">
  <div class="days"></div>
  <div class="hours"></div>
  <div class="minutes"></div>
  <div class="seconds"></div>
</div>

The Javascript

Finally, we wil initialize the plugin in the jQuery by using the document ready function.

<script>
$(document).ready(function() {
  //Callback works only with direction = "down"
  $('.flipTimer').flipTimer({ direction: 'up' });
});
</script>

If you don’t set any date in the “flipTimer” function then the plugin automatically gets the today date else you can define it as follows:

<script>
  $(document).ready(function() {
    $('.flipTimer').flipTimer({ direction: 'down', date: 'June 17, 2013 23:15:00' });
  });
</script>

The plugin supports the fallback function which means you can define the custom function after the set time completed. Let’s have a look at the function.

<script>
  $(document).ready(function() {
    $('.flipTimer').flipTimer({ direction: 'down', date: 'June 17, 2013 23:15:00', callback: function() { alert('times up!'); } });
  });
</script>

Advanced Configuration Options

The following are some advanced configuration options to create a jQuery countdown timer with the callback function.

How’s this plugin? Does it help you to create the countdown/up function? Let me know in below comment section.