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显示的类型,可以是:countdownrandomnumber 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,默认为当前年的最后一天。