LED样式jquery时间倒计时插件

当前位置:主页 > jQuery库 > 布局和界面 > LED样式jquery时间倒计时插件
LED样式jquery时间倒计时插件
分享:

    插件介绍

    jquery-led.js是一款LED样式jquery时间倒计时插件。jquery-led.js能够创建基于SVG矢量图的LED样式的倒计时器,时间时钟和显示随机字母。

    浏览器兼容性

    浏览器兼容性
    时间:2017-07-13
    阅读:
麦子学院
简要教程

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

网友评论