New Year countdown With FlipClock.js
FlipClock.js is a great library for creating clocks, timers, counters etc. Let’s create a New Year Countdown timer. Why ? Because New Year’s Eve is coming… and it’s fun.
Well, first of all we have to define new-year-clock element on the page:
<body>
<div class="new-year-clock"></div>
</body>And now we are ready to add a little snippet of javascript, which calculates the time left to the upcoming 1st of January and initializes FlipClock:
$(document).ready(function() {
var now = new Date();
var once = new Date(now.getFullYear() + 1, 0, 1);
var time = once.getTime() / 1000 - now.getTime() / 1000;
$('.new-year-clock').FlipClock(time, {
clockFace: 'DailyCounter',
countdown: true
});
});Done, we have a New Year Countdown timer. So easy. It’s amazing!
Finally, after some styling, checkout a demo and a code on Github.
Happy New Year!
Leave a Comment