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