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

在线预览    源码下载