jQuery实用LED样式计时器|倒计数器插件

ClassyLED是一款非常实用的LED样式计时器|倒计数器jQuery插件。你可以实用该插件来制作各种倒计数效果，倒计时效果，电子时钟效果，或制作LED样式的随机数字。使用该插件来制作LED效果非常容易，并且效果非常不错。

使用方法

该LED效果的动画依赖于raphael.js-一个矢量图形动画库插件。使用时要将其引入。

<script src="js/jquery.min.js"></script>
<script src="http://github.com/DmitryBaranovskiy/raphael/raw/master/raphael.js"></script>
<script src="js/jquery.classyled.min.js"></script>                
              

HTML结构

可以使用一个空的<div>来制作该LED数字效果。

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

初始化插件

在页面DOM元素加载完毕之后，可以通过ClassyLED()方法来初始化该插件。

$('.led').ClassyLED({
    type: 'countdown',
    format: 'ddd:hh:mm:ss',
    color: '#eee',
    backgroundColor '#000',
    size: 16
});                
              

配置参数

• type：LED显示的类型，可以是：countdown，random，number 和time。默认为time。
• format：LED的时间格式，例如：hh:mm:ss。默认为hh:mm。
• value：如果LED的类型是number，可以通过该参数来指定值。
• color：LED数字的十六进制颜色，默认是#fff。
• bgcolor：背景的的十六进制颜色，默认是#000。
• size：LED数字的尺寸，单位像素，默认值12。
• rounded：LED数字的圆角，默认值为1。
• spacing：两个数字之间的距离，默认为1。
• fontType：LED数字的字体类型，取值1-3，默认为1。
• hourFormat：小时的格式，可以是12或24。默认为24。
• countTo：如果是倒计时器，该参数设置要倒计时到的时间。格式为yyyy:mm:dd，例如：2015:12:25，默认为当前年的最后一天。