New Year countdown With FlipClock.js

less than 1 minute read

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!

Tags:

Updated:

Leave a Comment