Home » jQuery » jQuery LED

jQuery LED

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

Language Javascript
License MIT
Version 2.0.0
Release date January 22, 2017
Download zip archive
Source git 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

Name Default Description
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”).
value If 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.
size 12 LED digit size in pixels.
rounded 1 Round radius of the LED digits.
spacing 1 Spacing between the digits.
font_type 1 Type of the LED font display, between 1 and 3.
hour_format 24 Hour format, can be 12 or 24.
count_to 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.

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
});