Get Karik Now

Countdown

A simple and html agnostic date countdown plugin for jQuery

  1. Home
  2. Elements
  3. Countdown

The Final Countdown is a plugin tailored to be used in any layout, without any CSS/HTML dependency. The goal was to fit and mimic differents countdown styles as you see out there in coupons and auction sites. Learn More

Basic Countdown

Countdown with control buttons

                                                    
<div class="panel panel-default" data-toggle="tooltip" data-placement="top" title="This is countdown 15 days">
    <div class="panel-body number-countdown mb-30">
        <div class="lead" id="countdown"></div>
    </div>
    </div>                                      
    <button type="button" class="btn btn-brand btn-sm" id="btn-reset">
        <i class="ti-reload mr-5"></i>Reset
    </button>
    <button type="button" class="btn btn-danger btn-sm" id="btn-pause">
     <i class="ti-control-pause mr-5"></i>Pause
    </button>
    <button type="button" class="btn btn-success btn-sm" id="btn-resume">
        <i class="ti-control-play mr-5"></i>Resume
    </button>
</div>

//jquery
function get15dayFromNow() {
    return new Date(new Date().valueOf() + 15 * 24 * 60 * 60 * 1000);
}
var $clock = $('#countdown');
$clock.countdown(get15dayFromNow(), function(event) {
    $(this).html(event.strftime('%D days %H:%M:%S'));
});
$('#btn-reset').click(function() {
    $clock.countdown(get15dayFromNow());
});
$('#btn-pause').click(function() {
    $clock.countdown('pause');
});
$('#btn-resume').click(function() {
    $clock.countdown('resume');
});
Date countdown

You can set a countdown date by use #date-countdown

Limited Time Only!
                                                    
<div class="countdown">
    <h6 class="mb-15">Limited Time Only!</h6>
    <span id="date-countdown" class="font-weight-bold lead text-brand"></span>
</div>

//jquery
$('#date-countdown').countdown('2022/10/10 12:34:56')
    .on('update.countdown', function(event) {
    var format = '%H:%M:%S';
    if(event.offset.totalDays > 0) {
        format = '%-d day%!d ' + format;
    }
    if(event.offset.weeks > 0) {
        format = '%-w week%!w ' + format;
    }
    $(this).html(event.strftime(format));
    })
    .on('finish.countdown', function(event) {
    $(this).html('This offer has expired!')
        .parent().addClass('disabled');

});
Multiple instances on the same page

You can assign the countdown on several elements at the same time.

                                                    
<div class="number-countdown">                                  
    <div data-countdown="2022/01/01"></div>
    <div data-countdown="2023/01/01"></div>
    <div data-countdown="2024/01/01"></div>
    <div data-countdown="2025/01/01"></div>
</div>