Easy to configure lightweight jQuery countdown timer plugin

Last updated Jul 9, 2019

In this tutorial I am going to share very compact easy to configure lightweight jQuery countdown timer plugin – downCount developed by sonnyt. downCount is very lightweight timer countdown plugin with basic features like custom alert text and timezone support. You can also append a callback function which is called when countdown finishes.

Integrate downCount Countdown timer plugin

Libraries

Include jquery latest minified library after that add jquery.downCount.js on page.

<script src="//code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="jquery.downCount.js"></script>

HTML

Create a unordered list container for countdown timer which display days, hours, minutes and seconds.

<ul class="countdown">
        <li>
            <span class="days">00</span>
            <p class="days_ref">days</p>
        </li>
        <li class="seperator">.</li>
        <li>
            <span class="hours">00</span>
            <p class="hours_ref">hours</p>
        </li>
        <li class="seperator">:</li>
        <li>
            <span class="minutes">00</span>
            <p class="minutes_ref">minutes</p>
        </li>
        <li class="seperator">:</li>
        <li>
            <span class="seconds">00</span>
            <p class="seconds_ref">seconds</p>
        </li>
    </ul>

CSS

Add CSS on page for styling your countdown timer.

ul.countdown {
                list-style: none;downCount
                margin: 75px 0;
                padding: 0;
                display: block;
                text-align: center;
            }
            ul.countdown li {
                display: inline-block;
            }
            ul.countdown li span {
                font-size: 80px;
                font-weight: 300;
                line-height: 80px;
            }
            ul.countdown li.seperator {
                font-size: 80px;
                line-height: 70px;
                vertical-align: top;
            }
            ul.countdown li p {
                color: #a7abb1;
                font-size: 14px;
            }

JS

Finally call plugin function on page and set countdown date with offset and callback countdown finish message.

<script>
        $('.countdown').downCount({
            date: '06/10/2018 12:00:00',
            offset: +10
        }, function () {
            alert('WOOT WOOT, done!');
        });
    </script>

See live demo and download source code.

DEMO | DOWNLOAD

jquery & Javascrip