LED Display-Style jQuery Countdown & Clock Plugin - ClassyLED

File Size: 103 KB
Views Total: 5628
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
LED Display-Style jQuery Countdown & Clock Plugin - ClassyLED

ClassyLED is a plugin for jQuery and Raphaël JS library that allows you display a countdown timer, a clock, or a random number in a vector shaped LED display.

Basic Usage:

1. Load the necessary javascript libraries in the page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/raphael.js"></script>

2. Make sure to load the jQuery classyLED plugin after jQuery library.

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

3. Create a container element for the plugin.

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

4. Call the function on the container element and set the type of your LED display.

<script>
$(document).ready(function() {
$('.led').ClassyLED({
 type: "time", // time, countdown or random
 format: "hh:mm", // time format for the led
 color: "#f0a", // hex color of the digits
 backgroundColor: "#666", // hex color of the background
 size: 22, // LED digit size in pixels
 rounded: 4, // round radius of the LED digits
 length: 4, // spacing between the digits
 fontType: 1 // type of the LED font display
});
});
</script>

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