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
,默认为当前年的最后一天。
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!