Jquery digital numbers plugin

Inspired by some work I did recently, I've written a jQuery plugin to display and manipulate digital numbers, including making a clock.

Controlling what numbers are displayed and how that happens are all done by the plugin, but the actual rendering of the numbers is done entirely with CSS. The plugin does a few different things, including:

  • Start at a given number and count to another given number
  • Display the current time
  • Count down (or count up) to a specified date/time

Here's some examples of it in action. First, the time:

Start at one number, count to another and then loop:

Count the number of years, months, days, hours, minutes and seconds since a given time, in this case, the start of the year 2000:

Implementing

The plugin relies upon moment.js and the readable range moment.js plugin, which are included in the repo.

There's a few other options for controlling the plugin. Full instructions can be found on the github repository. It's not quite as flexible as I'd like with regards to styling, but if you look at the source of this page you should see some easy ways to make it behave.

Further work

I don't quite consider this plugin finished but I don't have a lot of time to work on it right now and I thought it would be good to get it up here in case anyone can find it useful. I'd like to add the ability to remotely control the plugin, rather than simply setting it up and letting it go, which would make it considerably more flexible. If anyone desperately needs that functionality let me know and I'll see what I can do, but for now, enjoy.

Related

This article is tagged with