ClassyLED
Your very own countdowns, courtesy of jQuery!

ClassyLED is a jQuery plugin written by Marius Stanciu - Sergiu, a plugin that can be used as a countdown, a clock or as a random numbers.

Download it

git clone git@class.pm:jquery-classyled.git 

First you need to include the jQuery and Raphael libraries, since ClassyLED depends on them. You can download them from the jQuery website, Raphael website or link them directly from the Google CDN.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://github.com/DmitryBaranovskiy/raphael/raw/master/raphael.js"></script>

Secondly, you need to include the ClassyLED javascript file into your page. You can do it by adding the code below to your page.

<script src="js/jquery.classyled.min.js"></script>

Next, you create the div element container that you want to apply ClassyLED on.

<div class="led"></div>

As the last step, you trigger the ClassyLED() function on the element you just created. In this case, we trigger the function on the div with the class led.

$('.led').ClassyLED({
    type: 'countdown',
    format: 'ddd:hh:mm:ss',
    color: '#eee',
    backgroundColor '#000',
    size: 16
});

• Parameters

  ---

• type - type of the LED display, can be countdown, random, number or time, default is time
• format - time format for the led (ex. "hh:mm:ss"), default is hh:mm
• color - hex color of the digits, default is #FFF
• bgcolor - hex color of the background, default is #000
• size - LED digit size in pixels, default is 12
• rounded - round radius of the LED digits, default is 1
• spacing - spacing between the digits, default is 1
• fontType - type of the LED font display, between 1 and 3, default is 1
• hourFormat - hour format, can be 12 or 24, default is 24
• countTo - if it's a countdown, the date to which we count to, following the yyyy:mm:dd format, for ex: 2015:12:25, default is the end of the current year.

Current Time

$('.led2').ClassyLED({
    type: 'time',
    format: 'hh:mm',
    color: '#ed1978',
    backgroundColor: '#cccccc',
    size: 14,
    rounded: 4,
    fontType: 1
});

Countdown to Christmas (days-hours-minutes-seconds)

$('.led3').ClassyLED({
    type: 'countdown',
    format: 'ddd:hh:mm:ss',
    countTo: '2014:12:25',
    color: '#ff0000',
    backgroundColor: '#ffffff',
    size: 10,
    fontType: 2
});

Countdown to New Year (days-hours)

$('.led4').ClassyLED({
    type: 'countdown',
    format: 'ddd:hh',
    color: '#af0',
    backgroundColor: '#101a10',
    size: 10,
    rounded: 6
});

Random numbers

$('.led5').ClassyLED({
    type: 'random',
    color: '#ed1978',
    backgroundColor: '#ffffff',
    size: 17,
    rounded: 9,
    fontType: 3
});