Hit enter after type your search item

A jQuery / JS countdown plug-in with 4 online demos

The jQuery countdown plug-in

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

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

See the following section for online demonstration of 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.

jQuery countdown

See online demo and code

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:

 


 

Use the jQuery code for specifying the countdown:


 

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

A demo of 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:

JavaScript countdown

See online demo and code

The markup:


 

The JavaScript:


 

You only need to include the JS file of the plug-in. The CSS (simplyCountdown.theme.default.css) can be changed as per need 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 above example except the CSS file reference is changed to simplyCountdown.theme.default-custom.css. This contains almost the same CSS as in above example. Just a few classes like background color, box-shadow, color, and border-radius are added.

JavaScript countdown style

See online demo and code

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. See the demo online:

76.0_4-JavaScript-inline-countdown

See online demo and code

See the complete code in the demo page.

This div height required for enabling the sticky sidebar