LED样式jquery时间倒计时插件

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 src="path/to/raphael.min.js">
< script src="path/to/jquery-led.js">

 HTML结构

使用一个空的<div>元素作为该jquery时间倒计时器的容器。

< div class="led">

 初始化插件

通过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
 
});