基于HTML5 canvas圆形倒计时器jQuery插件

当前位置:主页 > Html5库 > html5 canvas > 基于HTML5 canvas圆形倒计时器jQuery插件
基于HTML5 canvas圆形倒计时器jQuery插件
分享:

    插件介绍

    这是一款基于html5 canvas的圆形倒计时器jQuery插件。它可以使你非常轻松的创建圆形的倒计时器。该jQuery倒计时器插件有12种themes,它们基于 HTML5 canvas 来渲染各种圆环。

    浏览器兼容性

    浏览器兼容性
    时间:2015-02-11
    阅读:
简要教程

这是一款基于html5 canvas的圆形倒计时器jQuery插件。它可以使你非常轻松的创建圆形的倒计时器。该jQuery倒计时器插件有12种themes,它们基于 HTML5 canvas 来渲染各种圆环,你可以很容易的修改它们。

这个jQuery环形倒计时器插件依赖于jquery.knob.js和jquery.throttle.js两个外部插件。

使用方法

外部依赖

首先需要引入jQuery和它的依赖文件,以及必要的CSS文件:

<link rel="stylesheet" type="text/css" href="css/jquery.classycountdown.min.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/jquery.classycountdown.min.js"></script>
<script src="js/jquery.knob.js"></script>
<script src="js/jquery.throttle.js"></script>
                
HTML结构

该jQuery计时器插件所需的html结构非常简单,你只需要一个空的<div>即可:

<div class="countdown"></div>
                
调用插件

在文档加载完毕后,就可以按下面的方法调用该计时器插件:

$('.countdown').ClassyCountdown({
    theme: "flat-colors",
    end: $.now() + 10000
});
                

配置参数

  • theme:用于指定环形倒计时器的主题。可用主题有:flat-colors, flat-colors-wide, flat-colors-very-wide, flat-colors-black, black, black-wide, black-very-wide, black-black, white, white-wide, white-very-wide。 和 white-black
  • labels:用于在环形倒计时器中显示 天/小时/分钟/秒 的文本。
  • style:自定义环形倒计时器的样式。
  • labelsOptions:用于指定不同语言的文本的对象。

方法

onEndCallback():当倒计时器倒计时到达0时的回调。