LED Display Style Countdown Clock Plugin - jQuery LED.js

File Size: 5.47 KB
Views Total: 3320
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
LED Display Style Countdown Clock Plugin - jQuery LED.js

LED.js is a jQuery plugin used to create vector SVG based, LED display style countdown, timer and clock components on your web application.

How to use it:

1. Include the necessary jQuery and Raphaël libraries on the webpage.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/raphael.min.js"></script>

2. Download and include the jQuery.led.js after jQuery library.

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

3. Create a basic countdown timer that will countdown to the end of current year.

$('.countdown').catLED({
  type: 'countdown',
  // more configuration here
});

4. Create a basic clock that will show the current local time.

$('.clock').catLED({
  type: 'time',
  // more configuration here
});;

5. The JavaScript to show random number strings in the LED display.

$('.random').catLED({
  type: 'random',
  // more configuration here
});

6. The JavaScript to show custom characters in the LED display.

$('.custom').catLED({
  type: 'random',
  value: 'JQUERYSCRIPT',
  // more configuration here
});

7. If you want to countdown to a specific datetime.

$('.countdown').catLED({
  type: 'countdown',
  format: 'dd:hh:mm:ss',
  count_to: '2017:12:24:59',
  // more configuration here
});

8. Possible plugin options to customize the LED.js plugin.

$('.countdown').catLED({

  // digit color
  color: '#fff',

  // background color
  background_color: '#000',

  // LED digit size
  size: 12,

  // Round radius of the LED digits.
  rounded: 1,

  // Spacing between the digits.
  spacing: 1, 

  // Type of the LED font display, between 1 and 3.
  font_type: 1,

  // can be 12 or 24.
  hour_format: 24
  
});

This awesome jQuery plugin is developed by sizeofcat. For more Advanced Usages, please check the demo page or visit the official website.