jquery-led.js是一款LED样式jquery时间倒计时插件。jquery-led.js能够创建基于SVG矢量图的LED样式的倒计时器,时间时钟和显示随机字母。
使用方法
在页面中引入jquery、raphael.min.js和jquery-led.js文件。
<script src="path/to/jquery.min.js"></script> <script src="path/to/raphael.min.js"></script> <script src="path/to/jquery-led.js"></script>
HTML结构
使用一个空的<div>
元素作为该jquery时间倒计时器的容器。
<div class="led"></div>
初始化插件
通过type
参数来指定需要生成何种类型的计时器。
生成一个最基本的倒计时器。
$('.countdown').catLED({ type: 'countdown' });
下面的代码生成一个基本的时间时钟。
$('.clock').catLED({ type: 'time' });
下面的代码生成一个到指定时间的倒计时器。
$('.countdown').catLED({ type: 'countdown', format: 'dd:hh:mm:ss', count_to: '2017:12:24:59' });
下面的代码生成随机数字。
$('.random').catLED({ type: 'random' });
下面的代码以LED的方式显示字母。
$('.custom').catLED({ type: 'random', value: 'JQUERY' });
配置参数
除了上面使用的配置参数,jquery-led.js插件的可用配置参数还有。
$('.countdown').catLED({ // 数字的颜色 color: '#fff', // 背景颜色 background_color: '#000', // LED数字的大小 size: 12, // LED数字的圆角 rounded: 1, // LED数字之间的距离 spacing: 1, // LED数字的字体,可选的有1-3 font_type: 1, // 时间格式:12或24 hour_format: 24 });
jquery-led.js - jquery时间倒计时插件的github地址为:https://github.com/sizeofcat/jquery-led
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!