A jQuery/JS Countdown Plug-in with 4 Demos

The jQuery countdown plug-in

This jQuery countdown plug-in can be used for websites with “Coming Soon” or “Under construction” status entirely or for a section of the website. You may also use this countdown plug-in for launching a particular feature or app, an offer, etc. on a website.

The cool point is that you may use this simply as JavaScript countdown or with jQuery library.

See the following section for an online demonstration of the JavaScript/jQuery countdown plug-in along with how to set up for your website guide.

A demo of countdown timer with days, hours, minutes, and seconds

In this example, the plug-in is used with jQuery library. The countdown is showing the number of days, hours, minutes, and seconds.

For setting up jQuery based countdown plug-in, you need to download this from the Github website here. Extract the zip file and get the simplyCountdown.js file from dev or dist folders.

<script src=”https://code.jquery.com/jquery-2.2.2.min.js”></script>

<script src=”js/simplyCountdown/simplyCountdown.js”></script>

Although, it will only work for having a simple countdown, for styling the counter like in the demo page, get the CSS files from the CSS folder. For the above demo, I used simplyCountdown.theme.losange.css file.

<link href=”css/simplyCountdown/simplyCountdown.theme.losange.css” rel=”stylesheet” type=”text/css”>

In the markup section, use the <div> tag with simply-countdown-losange class where you want to display the countdown jQuery plug-in:

   <div class="examples">

        <h3>A demo of countdown with jQuery</h3>

        <div class="simply-countdown-losange" id="demo-jquery-countdown"></div>

 

    </div>

Use the jQuery code for specifying the countdown:

<script>

    var d = new Date(new Date().getTime() + 48 * 120 * 120 * 3000);

 

    //A demo of jQuery countdown

    $('#demo-jquery-countdown').simplyCountdown({

        year: d.getFullYear(),

        month: d.getMonth() + 1,

        day: d.getDate(),

        enableUtc: false

    });

</script>

Note: You may also get the JS and CSS files by View page source the demo pages.

Complete code combined:

<!DOCTYPE html>
<html>
<head>

<link href="css/simplyCountdown/simplyCountdown.theme.losange.css" rel="stylesheet" type="text/css">

</head>
<body>
   

    <div class="examples">
        <h3>A demo of countdown with jQuery</h3>
        <div class="simply-countdown-losange" id="demo-jquery-countdown"></div>

    </div>
    
<script src="https://code.jquery.com/jquery-2.2.2.min.js"></script>
<script src="js/simplyCountdown/simplyCountdown.js"></script>
<script>
    var d = new Date(new Date().getTime() + 48 * 120 * 120 * 3000);

    //A demo of jQuery countdown
    $('#demo-jquery-countdown').simplyCountdown({
        year: d.getFullYear(),
        month: d.getMonth() + 1,
        day: d.getDate(),
        enableUtc: false
    });
</script> 
</body>
</html>

A demo of a simple JavaScript countdown by using this plug-in

You may even display the countdown without using the jQuery code. See this example where JavaScript code is used for the countdown:

Complete code:

<!DOCTYPE html>
<html>
<head>

<link href="css/simplyCountdown/simplyCountdown.theme.default.css" rel="stylesheet" type="text/css">

</head>
<body>
   

    <div class="examples">
        <p>A demo with JavaScript without jQuery</p>
        <div class="simply-countdown js-countdown-demo"></div>

    </div>
    
<script src="https://code.jquery.com/jquery-2.2.2.min.js"></script>
<script src="js/simplyCountdown/simplyCountdown.js"></script>
<script>
    var d = new Date(new Date().getTime() + 48 * 120 * 120 * 3000);

    simplyCountdown('.js-countdown-demo', {
        year: d.getFullYear(),
        month: d.getMonth() + 1,
        day: d.getDate()
    });
</script> 
</body>
</html>

You only need to include the JS file of the plug-in. The CSS (simplyCountdown.theme.default.css) can be changed as per needs of your website. See the following demo.

Modifying the CSS for showing JavaScript countdown

In this demo, the markup or code section remains the same as in the above example except the CSS file reference is changed to simplyCountdown.theme.default-custom.css. This contains almost the same CSS as in the above example. Just a few classes like background color, box-shadow, color, and border-radius are added.

A demo of inline JavaScript countdown

If you want a very simple inline JS countdown, then use the JavaScript code and call the class or ID used in the div.

Code:

<!DOCTYPE html>
<html>
<head>

</head>
<body>
    <div class="examples">
        <p>An inline demo of countdown</p>
        <div class="demo-inline-js-countdown"></div>
    </div>
    
<script src="js/simplyCountdown/simplyCountdown.js"></script>
<script>
    var d = new Date(new Date().getTime() + 48 * 120 * 120 * 3000);

    simplyCountdown('.demo-inline-js-countdown', {
        year: d.getFullYear(),
        month: d.getMonth() + 1,
        day: d.getDate(),
        inline: true
    });
</script> 
</body>
</html>