LED样式jquery时间倒计时插件_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

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