FlipClock - Multiple Instances - Counting up to a specific date in the data countdown
I am trying to make a FlipClock JS countdown to the date given in this markup:
<script>
(jQuery)(document).ready(function() {
clocks.push((jQuery)('.clock-1').FlipClock(3600, {
countdown: true,
clockFace: 'DailyCounter',
}));
});
</script>
<div class="clock-1" data-countdown="15/07/2015 17:12:20" style="margin:2em;"></div>
<div class="message"></div>
<div class="clock-1" data-countdown="15/07/2015 23:19:35" style="margin:2em;"></div>
<div class="message"></div>
<div class="clock-1" data-countdown="16/07/2015 19:18:27" style="margin:2em;"></div>
<div class="message"></div>
<div class="clock-1" data-countdown="21/07/2015 16:47:40" style="margin:2em;"></div>
<div class="message"></div>
<div class="clock-1" data-countdown="21/07/2015 22:12:44" style="margin:2em;"></div>
<div class="message"></div>
As with using date + time from
data-countdown="21/07/2015 22:12:44"
Also to do it in multiple copies on one page (e.g. 8 different countdowns per page)
And my other question is, if this doesn't consume a lot of resources by putting 8 of these countdowns per page?
Here is my JSFiddle example
CLEAN: https://jsfiddle.net/jx0mmvLq/ (but the script doesn't work at all because it seems like I can't import the JS FlipClock library)
DIRTY: https://jsfiddle.net/haj070g3/1/ (it was necessary to add the whole library in the "script" section so that it doesn't load it in any other way)
I was prompted to post links to Docs (but I can only post 2 links with my current reputation)
http://flipclockjs.com/
source to share
So first of all, change the date format: mm/dd/yyyy hh:mm:ss
to yyyy/mm/dd hh:mm:ss
.
Your HTML code now looks like this:
<div class="clock-1" data-countdown="2015/07/15 17:12:20" style="margin:2em;"></div>
<div class="message"></div>
<div class="clock-1" data-countdown="2015/07/15 23:19:35" style="margin:2em;"></div>
<div class="message"></div>
<div class="clock-1" data-countdown="2015/07/16 19:18:27" style="margin:2em;"></div>
<div class="message"></div>
<div class="clock-1" data-countdown="2015/07/21 16:47:40" style="margin:2em;"></div>
<div class="message"></div>
<div class="clock-1" data-countdown="2015/07/21 22:12:44" style="margin:2em;"></div>
<div class="message"></div>
I can see that the plugin does not provide this functionality when you can apply the plugin to many elements. So do it. You must use $.each
and apply this plugin for every element.
Also, you need to convert the date to a timestamp. JavaScript provides an object Date
: new Date('yyyy/mm/dd hh:mm:ss').getTime()
. But that gives us milliseconds since 1970/01/01 00:00:00. It's not a problem to just divide by 1000.
One more thing that you need. When you get seconds, you get it from 1970/01/01, but you want to get second in the current date in the future. So, you just get the current time and subtract it from the future date.
So, all these actions look like this:
$(document).ready(function() {
var clocks = [];
$('.clock-1').each(function() {
var clock = $(this),
date = (new Date(clock.data('countdown')).getTime() - new Date().getTime()) / 1000;
clock.FlipClock(date, {
clockFace: 'DailyCounter',
countdown: true
});
clocks.push(clock);
});
});
Ok, hopefully this will help you.
And your last question, I think this will work well.
source to share
You just need to go through all the elements .clock-1
and initialize them in turn. Like this:
(jQuery)('.clock-1').each(function(){
var clock = (jQuery)(this).FlipClock(3600, {
countdown: true,
clockFace: 'DailyCounter',
});
clocks.push(clock);
});
Demo: https://jsfiddle.net/alan0xd7/haj070g3/2/
As for your question about resource usage, you can simply check the Windows Task Manager while your page is open and determine if it is using too much CPU or not.
Update:
To support getting time from a data attribute:
(jQuery)('.clock-1').each(function(){
var time = (jQuery)(this).data("countdown");
time = ((new Date(time))-(new Date().getTime()))/1000;
var clock = (jQuery)(this).FlipClock(time, {
countdown: true,
clockFace: 'DailyCounter',
});
clocks.push(clock);
});
https://jsfiddle.net/alan0xd7/haj070g3/4/
Please note that the date format is in YYYY/MM/DD HH:MM:SS
source to share