Home » jQuery » jQuery LED

jQuery LED

This jQuery plugin can be used as a countdown, a clock or as a random numbers.

LanguageJavascript
LicenseMIT
Version2.0.0
Release dateJanuary 22, 2017
Downloadzip archive
Sourcegit clone https://github.com/sizeofcat/jquery-led.git

Setup

First you need to include the jQuery and Raphael libraries, since LED 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/3.1.1/jquery.min.js"></script>
<script src="//github.com/DmitryBaranovskiy/raphael/raw/master/raphael.js"></script>

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

<script src="js/jquery-led.js"></script>

Next, you create the element container that you want to apply catLED() on.

<div class="led1"></div>

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

$('.led1').catLED({
    type: 'countdown',
    format: 'ddd:hh:mm:ss',
    color: '#eee',
    background_color '#000',
    size: 16
});

Settings

NameDefaultDescription
type‘time’Type of the LED display, can be countdown, random, number or time.
format‘hh”mm’Time format for the led (ex. “hh:mm:ss”).
valueIf the LED type is number, specify the desired number here.
color’#fff’Hex color of the digits.
background_color’#000’Hex color of the background.
size12LED digit size in pixels.
rounded1Round radius of the LED digits.
spacing1Spacing between the digits.
font_type1Type of the LED font display, between 1 and 3.
hour_format24Hour format, can be 12 or 24.
count_toIf 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.

Demo

Countdown to the end of current year

Code:

$('.led1').catLED({
    type: 'countdown',
    format: 'ddd:hh:mm:ss',
    hour_format: 12,
    color: '#fa0',
    background_color: '#fafafa',
    rounded: 0,
    font_type: 2,
    size: 9
});

Show current time

Code:

$('.led2').catLED({
    type: 'time',
    format: 'hh:mm',
    color: '#ed1978',
    background_color: '#ccc',
    size: 8,
    rounded: 4,
    font_type: 1
});

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

$('.led3').catLED({
    type: 'countdown',
    format: 'ddd:hh:mm:ss',
    count_to: '2017:12:25',
    color: '#ff0000',
    background_color: '#fff',
    size: 8,
    font_type: 2
});

Countdown to New Year (days-hours)

$('.led4').catLED({
    type: 'countdown',
    format: 'ddd:hh',
    color: '#0000ff',
    background_color: '#888',
    size: 10,
    font_type: 2,
    rounded: 6
});

Random numbers

$('.led5').catLED({
    type: 'random',
    color: '#ed1978',
    background_color: '#fff',
    size: 6,
    rounded: 9,
    font_type: 3
});