jQuery Countdown Timer with Moment JS

Here is an ultra-lightweight (3KB only) countdown timer function created with jQuery and Moment JS library. It creates a timer clock with days, hours, minutes, and seconds. The plugin displays a real-time countdown timer with the digital clock (segment 7) fonts.

This timer plugin can be used for under construction pages to notify the users about coming back time. Similarly, you can use it for the limited time offer or for a general-purpose countdown timer.

As it depends on Moment JS, it supports all timezone. So, you can easily set timezone in its configuration variable. Likewise, you can set the end date on how long the downtime should be. You can define a custom message that will be shown after finishing the countdown.

How to Create jQuery Countdown Timer

1. This plugin requires jQuery, Moment JS, and Moment Timezone JavaScript library. So, load these libraries (before plugin file) into your HTML document in order to get started with this timer plugin.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ="crossorigin="anonymous"></script>
<!-- Moment JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.js"></script>
<!-- Moment Timezone JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.4/moment-timezone-with-data.js"></script>
<!-- Countdown Timer JS -->
<script src="js/timer.js"></script>

2. Similarly, load the Segment 7 fonts CSS and style file into your page. The fonts CSS is optional, it’s your choice whether to display digits in clock-like fonts or not.

<!-- Segment 7 Fonts CSS -->
<link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/segment7" type="text/css"/>
<!-- Countdonw Timer CSS -->
<link rel="stylesheet" href="css/style.css">

3. After loading all necessary assets, create an HTML div element with class name “clock”, place other div elements inside it with ‘days’, ‘hours’, ‘minutes’, and ‘seconds’ id. You are not limited to keep their position as it is, you can arrange them according to your needs. Similarly, you can also add some extra elements between these tags. A basic structure for countdown timer is as follows:

    <div class="clock">
        <div class="column days">
            <div class="timer" id="days"></div>
            <div class="text">DAYS</div>
        </div>
        <div class="timer days">:</div>
        <div class="column">
            <div class="timer" id="hours"></div>
            <div class="text">HOURS</div>
        </div>
        <div class="timer">:</div>
        <div class="column">
            <div class="timer" id="minutes"></div>
            <div class="text">MINUTES</div>
        </div>
        <div class="timer">:</div>
        <div class="column">
            <div class="timer" id="seconds"></div>
            <div class="text">SECONDS</div>
        </div>
    </div>

4. Basically, the “timer” function automatically runs after loading all assets. However, you can configure it by editing the timer.js file. The following are the available configuration options. Just pass the custom values in order to customize it.

        var config = {
            endDate: '2025-05-19 09:00',
            timeZone: 'Europe/Dublin',
            hours: $('#hours'),
            minutes: $('#minutes'),
            seconds: $('#seconds'),
            newSubMessage: 'and should be back online in a few minutes...'
        };

Tha’s all! we hope you like this jQuery/Moment JS countdown timer. Let us know by comment below if you have successfully implemented this timer into your project.