Home » Odeon Blogs » Horia, Coding Passion »

Animated Retro Clock

Animated Retro Clock

A friend of mine, Tudor, stumbled upon this great flip down clock tutorial.

Even the end-result is pretty spiffy. There was just one problem, MooTools. I have nothing against MooTools, really. This is not another MooTools vs. jQuery post. But here, at Odeon, we like working with jQuery. Since nobody really fancies adding both libraries on one page, I had decided to port this code to jQuery.

You can see a demo here. And I've also setup a github project for your cloning pleasure.

You can get the code fast by doing this:

  1. git clone git://github.com/hdragomir/Flip-Down-Clock.git


Photo Source

Category: Javascript

Tagged as: github jquery mootools


  1. dzes on May 31, 2010 - 5:14 said:

    Great thing.

    However, being complete newbie in JQuery I'd need to get NOT the client's time as it does now but exact time from specified time zone. I've seen it parsed from http://json-time.appspot.com/ somewhere else but wasn't lucky to transfer it to the clock.

    Any ideas how it might work?

  2. Roberto on Jun 11, 2010 - 7:46 said:

    How would I convert this to a countdown for? Like 251 days, 10 hours, 12 minutes and 52 milliseconds?

  3. Hi Roberto, you may check this:

    While it's on MooTools I think there is not much of a difference in the code (just compare them to make sure).

  4. Roberto, you can also check out http://superdeal.sg/
    The jQuery version is used there and it counts down instead of following the current time.

    dzes, you can use Date().getTimezoneOffset() to handle the timezone differences. See more here: https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Objects/Date

  5. Finn Cinte on Jan 14, 2011 - 7:30 said:

    What about counting down from a set number, for example from 250 to 0?

    Preferably I'd want it to rapidly count down from 9999 to the current number, which is set by some external source (e.g. fetched with JSON every "tick" or something.)

  6. You should add image preloading or create one sprite with all digits, because on slow internet connections for few miliseconds two halves on some digits are displayed with different numbers.

  7. CaldwellYSR on Jun 09, 2011 - 11:35 said:

    So I've done this and I have the clock (which is awesome by the way) but I want to add another clock showing a different time zone. I want one to always show Central time zone and one to show pacific time zone. How would this work???

Leave a Comment :




Page generated in: 0.14s