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 |
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.