How to set multiple countdown

[kanawanzx]

Hello ! i have a problem . this is multiple countdown . i wanna set multiple time countdown in 1 page. i has a question .how to set multiple time countdown and multiple time value. help me please.

[rajeshtomjoe]

I have done some modifications to the plugin to support multiple countdowns in a page. please refer to my fork https://github.com/rajeshtomjoe/jquery-final-countdown

[ghost]

1 question i want end day 16/04/2017 how to add script sec.

i want to start count day curent day example

start : 25/10/2016

end : 16/04/2017

now : left end curent year ?

$(document).ready(function() {
    $('.countdown').final_countdown({
        'start': 518400,
        'end': 21081600,
        'now': 6048000
    }, function() {
        // Finish Callback
    });
});

[devenamulhaque]

You can set multiple countdown using data attributes. I myself use this.

HTML code

<ul class="counter-timer" data-counttime="04/24/2019">
    <li><span class="days">00</span>
        <p class="days_text">Days</p>
    </li>
    <li><span class="hours">00</span>
        <p class="hours_text">Hours</p>
    </li>
    <li><span class="minutes">00</span>
        <p class="minutes_text">Minutes</p>
    </li>
    <li><span class="seconds">00</span>
        <p class="seconds_text">Seconds</p>
    </li>
</ul>

Activation code

// Normal countdown
$('.counter-timer').each(function() {
    $(this).countdown({
        date: $(this).data('counttime') || '04/24/2020',
    })
})

[devenamulhaque]

You can also use circle countdown using this I have added data attributes so we can manage easily from HTML code.

// circle countdown
$('.countdown').each(function() {
    var end = Math.floor(new Date($(this).data('end')).getTime() / 1000)
    var start = Math.floor(new Date($(this).data('start')).getTime() / 1000)
    var now = Math.floor(new Date().getTime() / 1000)
    $(this).final_countdown({
        start: start,
        end: end,
        now: now,
    })
})

HTML code

<div class="countdown countdown-container container  divider-bottom pab-14" data-start="11/05/2016" data-end="11/01/2019" data-border-color="rgba(0, 0, 0, .8)">
    <div class="clock row maxw-550 mx-auto">
        <!-- Single clock box -->
        <div class="clock-item clock-days countdown-time-value col-sm-6 col-md-3">
            <div class="wrap">
                <div class="inner">
                    <div id="canvas-days" class="clock-canvas"></div>
                    <div class="time-text">
                        <p class="val">100</p>
                        <p class="type-days type-time">DAYS</p>
                    </div>
                </div>
            </div>
        </div>
        <!-- Single clock box -->
        <div class="clock-item clock-hours countdown-time-value col-sm-6 col-md-3">
            <div class="wrap">
                <div class="inner">
                    <div id="canvas-hours" class="clock-canvas"></div>
                    <div class="time-text">
                        <p class="val">0</p>
                        <p class="type-hours type-time">HOURS</p>
                    </div>
                </div>
            </div>
        </div>
        <!-- Single clock box -->
        <div class="clock-item clock-minutes countdown-time-value col-sm-6 col-md-3">
            <div class="wrap">
                <div class="inner">
                    <div id="canvas-minutes" class="clock-canvas"></div>
                    <div class="time-text">
                        <p class="val">0</p>
                        <p class="type-minutes type-time">MINUTES</p>
                    </div>
                </div>
            </div>
        </div>
        <!-- Single clock box -->
        <div class="clock-item clock-seconds countdown-time-value col-sm-6 col-md-3">
            <div class="wrap">
                <div class="inner">
                    <div id="canvas-seconds" class="clock-canvas"></div>
                    <div class="time-text">
                        <p class="val">0</p>
                        <p class="type-seconds type-time">SECONDS</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- /.countdown-wrapper -->