LED Display Countdown Clock jQuery LED - Download LED Display Style Countdown Clock Plugin - jQuery LED.js

Download LED Display Style Countdown Clock Plugin – jQuery LED.js

By Posted on

This time I will share jQuery Plugin and tutorial about LED Display Style Countdown Clock Plugin – jQuery LED.js, hope it will help you in programming stack.

LED Display Countdown Clock jQuery LED - Download LED Display Style Countdown Clock Plugin - jQuery LED.js

File Size: 5.47 KB
Views Total: 2619
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

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.

view source
1 <script src="/path/to/jquery.min.js"></script>
2 <script src="/path/to/raphael.min.js"></script>

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

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

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

view source
1 $('.countdown').catLED({
2   type: 'countdown',
3   // more configuration here
4 });

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

view source
1 $('.clock').catLED({
2   type: 'time',
3   // more configuration here
4 });;

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

view source
1 $('.random').catLED({
2   type: 'random',
3   // more configuration here
4 });

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

view source
1 $('.custom').catLED({
2   type: 'random',
3   value: 'JQUERYSCRIPT',
4   // more configuration here
5 });

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

view source
1 $('.countdown').catLED({
2   type: 'countdown',
3   format: 'dd:hh:mm:ss',
4   count_to: '2017:12:24:59',
5   // more configuration here
6 });

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

view source
01 $('.countdown').catLED({
02  
03   // digit color
04   color: '#fff',
05  
06   // background color
07   background_color: '#000',
08  
09   // LED digit size
10   size: 12,
11  
12   // Round radius of the LED digits.
13   rounded: 1,
14  
15   // Spacing between the digits.
16   spacing: 1,
17  
18   // Type of the LED font display, between 1 and 3.
19   font_type: 1,
20  
21   // can be 12 or 24.
22   hour_format: 24
23    
24 });

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

source : jqueryscript.net

Related posts: