LED Display-Style jQuery Countdown & Clock Plugin - ClassyLED
| File Size: | 103 KB |
|---|---|
| Views Total: | 5669 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
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.










