PragmaticMates / jquery-final-countdown

GNU General Public License v2.0
76 stars 39 forks source link

How to set the time? #14

Open febdao opened 9 years ago

febdao commented 9 years ago

Hi guy! Your countdown is very good, I like it and I want to use it for the website about my wedding event. But I have a problem with the time, can you explain how can I set the time? I need to countdown to November 01, 2015. This is my code but it doesn't work correctly

  var end = new Date("11/01/2015").getTime(); 
  var start = new Date("10/05/2015").getTime(); 
  var now = new Date().getTime();
    $('.countdown').final_countdown({
        'start': start,
        'end': end,
        'now': now
    });

Please help me now! Thanks!

febdao commented 9 years ago

Ok! I got it from older issues!

var end = Math.floor((new Date("11/01/2015")).getTime()/1000); 
var start =  Math.floor((new Date("10/05/2015")).getTime()/1000); 
var now =  Math.floor((new Date).getTime()/1000);
$('.countdown').final_countdown({
    'start': start,
    'end': end,
    'now': now
});


Thanks a lot! :dancer: 
devenamulhaque commented 5 years ago

Hi @febdao , 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 -->