jQuery Countdown Plugin

1. Introduction

countdown-plugin is a plugin that allows you to create good-looking countdowns on your website. The plugin is very light, easy to customize and comes with nice options, for example, it can obey a specified timezone or fire special function when the counter goes down to zero.

2. Plugin Overview

Demo

3. How to install and use countdown-plugin jQuery plugin

Follow the below steps to install countdown-plugin jQuery plugin on your website.

3.1. Load the jQuery and Bootstrap asset files into your HTML document:

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

<!-- Bootstrap CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" >

<!-- Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

3.2. Include countdown-plugin JavaScript and CSS files:

<!-- Countdown CSS -->
<link rel="stylesheet" href="css/style.css">

<!-- Countdown JS -->
<script src="js/countdown.jquery.js"></script>

3.2. Create DIV element where you want to run your countdown:

<div id="countdown"></div>

3.3. Initialize the countdown-plugin:

$('#countdown').countdown({
    year: 2016,   // YYYY Format
    month: 1,     // 1-12
    day: 1,       // 1-31
    hour: 21,     // 24 hour format 0-23
    minute: 30,   // 0-59
    second: 0,    // 0-59
    timezone: -6, // http://en.wikipedia.org/wiki/List_of_tz_database_time_zones
    labels: true, // Show/Hide label elements
    onFinish: function () {
        ...
    }  // Executes client side when timer is zero
});

After initialization, the plugin will set the counter and start the countdown to the specified date/time.

4. Conclusion

In this article, we presented countdown-plugin, which can be used to present how much time left to the special event. You can use it to showcase users when your website will be available.