I've implemented the jQuery.countdown plugin on a page, I'd like to give a paging effect when the numbers change. Same as in plugin home page
Does anyone have an idea how to do it?
I've implemented the jQuery.countdown plugin on a page, I'd like to give a paging effect when the numbers change. Same as in plugin home page
Does anyone have an idea how to do it?
Almost everything was taken from the page, I just translated ...
The magic is done in the$(window).on('load', function() {
$(window).on('load', function() {
var labels = ['weeks', 'days', 'hours', 'minutes', 'seconds'],
nextYear = (new Date().getFullYear() + 1) + '/01/01',
template = _.template($('#main-example-template').html()),
currDate = '00:00:00:00:00',
nextDate = '00:00:00:00:00',
parser = /([0-9]{2})/gi,
$example = $('#main-example');
function strfobj(str) {
var parsed = str.match(parser),
obj = {};
labels.forEach(function(label, i) {
obj[label] = parsed[i]
});
return obj;
}
function diff(obj1, obj2) {
var diff = [];
labels.forEach(function(key) {
if (obj1[key] !== obj2[key]) {
diff.push(key);
}
});
return diff;
}
var initData = strfobj(currDate);
labels.forEach(function(label, i) {
$example.append(template({
curr: initData[label],
next: initData[label],
label: label
}));
});
$example.countdown(nextYear, function(event) {
var newDate = event.strftime('%w:%d:%H:%M:%S'),
data;
if (newDate !== nextDate) {
currDate = nextDate;
nextDate = newDate;
data = {
'curr': strfobj(currDate),
'next': strfobj(nextDate)
};
diff(data.curr, data.next).forEach(function(label) {
var selector = '.%s'.replace(/%s/, label),
$node = $example.find(selector);
$node.removeClass('flip');
$node.find('.curr').text(data.curr[label]);
$node.find('.next').text(data.next[label]);
_.delay(function($node) {
$node.addClass('flip');
}, 50, $node);
});
}
});
});
<link rel="stylesheet" href="http://hilios.github.io/jQuery.countdown/css/main.css">
<script src="//code.jquery.com/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
<script src="//cdn.rawgit.com/hilios/jQuery.countdown/2.2.0/dist/jquery.countdown.min.js"></script>
<div class="main-example">
<p>
Próximo ano será daqui:
</p>
<div class="countdown-container" id="main-example">
<div class="time weeks flip">
<span class="count curr top"></span>
<span class="count next top"></span>
<span class="count next bottom"></span>
<span class="count curr bottom"></span>
<span class="label">sem</span>
</div>
<div class="time days flip">
<span class="count curr top"></span>
<span class="count next top"></span>
<span class="count next bottom"></span>
<span class="count curr bottom"></span>
<span class="label">dias</span>
</div>
<div class="time hours flip">
<span class="count curr top"></span>
<span class="count next top"></span>
<span class="count next bottom"></span>
<span class="count curr bottom"></span>
<span class="label">horas</span>
</div>
<div class="time minutes flip">
<span class="count curr top"></span>
<span class="count next top"></span>
<span class="count next bottom"></span>
<span class="count curr bottom"></span>
<span class="label">min</span>
</div>
<div class="time seconds">
<span class="count curr top"></span>
<span class="count next top"></span>
<span class="count next bottom"></span>
<span class="count curr bottom"></span>
<span class="label">seg</span>
</div>
</div>
</div>
For this purpose, they used the jquery
, jquery-countdown
libraries in addition to the lodash library, it also uses the default css library of jquery-countdown
/ * Then I will try to understand the function used, and explain here * /