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

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

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

使用方法

外部依赖

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

HTML结构

该jQuery计时器插件所需的html结构非常简单，你只需要一个空的

即可：

调用插件

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

$('.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时的回调。

html圆圈倒计时,基于HTML5 canvas圆形倒计时器jQuery插件相关推荐

1. 概述--从零起步实现基于Html5的WEB设计器Jquery插件
当一个软件为了达到一定的业务扩展性时(产品上线后限定范围内的用户需求无需变更代码,通过简单的配置可满足用户的要求),必然要求软件是可配置的. 笔者过去开发过很多配置型的管理软件,从可配置的表单设计(F ...
8.图片组件和动画效果--从零起步实现基于Html5的WEB设计器Jquery插件（含源码）...
前面示例我建立了三种形状的组件,圆.矩形.椭圆,本节我将再扩展两种类型:图片和动画,并通过这个过程来论证前面OOP的编程是如何简化扩展工作的: 首先要在工具条里增加这两个组件,以便可以拖动: < ...
7.组件连线(贝塞尔曲线)--从零起步实现基于Html5的WEB设计器Jquery插件（含源码）...
上节讲到如何创建组件,清除设计器视图,以及设计视图的持久化和恢复,本节将重点讲如何实现组件间的连线,前面章节有提到为了方便从持久化文件中恢复,组件和连线是分别存放的:nodes和lines对象,两个组 ...
html5游戏开发马赛克对比,基于HTML5 Canvas的纯JS图片马赛克效果插件
这是一款基于HTML5 canvas的图片马赛克js插件.该图片马赛克插件使用简单,可调整马赛克的大小,透明度等属性,适合用于制作一些特殊的图片效果. 基于HTML5 Canvas的纯JS图片马赛克效 ...
php仪表盘,基于HTML5 canvas的仪表盘插件
简要教程 canvas-gauges是一款基于HTML5 Canvas的仪表盘插件.该仪表盘插件使用纯js来驱动动画,可以制作圆形和线性的仪表盘组件. 安装可以通过npm来安装该仪表盘插件$ npm ...
基于HTML5 Canvas和jQuery 的画图工具的实现
简介 HTML5 提供了强大的Canvas元素,使用Canvas并结合Javascript 可以实现一些非常强大的功能.本文就介绍一下基于HTML5 Canvas 的画图工具的实现.废话少说,先看成品 ...
html5 can,基于html5 can-vas实现漫天飞雪效果实例
本文实例讲述了基于html5 canvas实现漫天飞雪效果的方法,运行该实例可以看到很棒的下雪效果.如下图所示: 主要代码如下:代码如下:ttp://www.w3.org/TR/xhtml1/DTD/ ...
基于html5 Canvas图表库 : ECharts
基于html5 Canvas图表库 : ECharts 分类编程技术 ECharts开源来自百度商业前端数据可视化团队,基于html5 Canvas,是一个纯Javascript图表库,提供直观,生 ...
echart图片库_基于html5 Canvas图表库 : ECharts
ECharts开源来自百度商业前端数据可视化团队,基于html5 Canvas,是一个纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表.创新的拖拽重计算.数据视图.值 ...

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

html圆圈倒计时,基于HTML5 canvas圆形倒计时器jQuery插件相关推荐

最新文章

热门文章