jquery-final-countdown
jquery-final-countdown copied to clipboard
How to set the time?
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!
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:
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 -->