html5圆形进度条倒计时,时尚的圆形进度条样式的jQuery倒计时插件

jQuery Final Countdown是一款时尚的圆形进度条样式的jQuery倒计时插件。该倒计时插件可以显示倒计时的秒、分钟、小时和天数。它采用圆形进度条来作为倒计时的动画，非常的时尚大方。

使用方法

该倒计时插件依赖于jQuery和KineticJS-一个HTML5 Canvas库。使用是要将它们引入。

HTML结构

该倒计时插件的HTML结构使用下面的HTML结构，为了便于布局使用了Bootstrap作为框架。

DAYS

HOURS

MINUTES

SECONDS

初始化插件

在页面DOM元素加载完毕之后，可以通过下面的方法来初始化该倒计时插件。

$(document).ready(function() {

$('.countdown').final_countdown({

'start': 1362139200,

'end': 1388461320,

'now': 1387461319

}, function() {

// Finish Callback

});

配置参数

下面是该倒计时插件的一些默认配置参数：

var defaults = $.extend({

start: undefined,

end: undefined,

now: undefined,

selectors: {

value_seconds: '.clock-seconds .val',

canvas_seconds: 'canvas-seconds',

value_minutes: '.clock-minutes .val',

canvas_minutes: 'canvas-minutes',

value_hours: '.clock-hours .val',

canvas_hours: 'canvas-hours',

value_days: '.clock-days .val',

canvas_days: 'canvas-days'

seconds: {

borderColor: '#7995D5',

borderWidth: '6'

minutes: {

borderColor: '#ACC742',

borderWidth: '6'

hours: {

borderColor: '#ECEFCB',

borderWidth: '6'

days: {

borderColor: '#FF9900',

borderWidth: '6'

}

}, options);

DATA属性

你好可以在HTML标签中直接使用DATA属性来完成该倒计时插件的设置。可以通过data-*属性来定义倒计时的开始时间，结束时间和现在时间，以及圆形进度条的颜色等属性。

data-start="1362139200"

data-end="1388461320"

data-now="1387461319"

data-border-color="rgba(255, 255, 255, .8)">

REST OF HTML HERE

html5圆形进度条倒计时,时尚的圆形进度条样式的jQuery倒计时插件相关推荐

jquery倒计时插件可自定义多个倒计时间
jquery倒计时插件设置多个自定义倒计时时间,任意设置天.小时.分钟.秒倒计时间功能. 查看演示>> <!DOCTYPE html PUBLIC "-//W3C//DTD ...
android圆形点击效果,Android 三种方式实现自定义圆形页面加载中效果的进度条
[实例简介] Android 三种方式实现自定义圆形页面加载中效果的进度条 [实例截图] [核心代码] ad376a86-a9aa-49bc-8cea-321bcff2c0c3 └── AnimRou ...
android绘制环形进度_Android使用Canvas绘制圆形进度条效果
前言 Android自定义控件经常会用到Canvas绘制2D图形,在优化自己自定义控件技能之前,必须熟练掌握Canvas绘图机制.本文从以下三个方面对Canvas绘图机制进行讲解: 画布Canvas ...
Android自定义圆形下载进度条,Android自定义之圆形进度条
先来看看效果图,有图才有真相: Usage Android Studio 使用Gradle构建 dependencies { compile 'com.github.ws.circleprogress ...
php 页面加载进度条,HTML5/CSS3 网页加载进度条的实现，下载进度条等经典案例
今天给大家带来一个比较炫的进度条,进度条在一耗时操作上给用户一个比较好的体验,不会让用户觉得在盲目等待,对于没有进度条的长时间等待,用户会任务死机了,毫不犹豫的关掉应用:一般用于下载任务,删除大量任务 ...
android 播放mp3 倒计时,Android实战 - 音心播放器（MusicActivity - 倒计时，进度条实现）...
1.背景还是音乐播放界面,实现倒计时和进度条功能,基本实现过程: 当打开MusicActivity 的时候,MusicService会发送广播给MusicActivity ,后开始当前播放的时间进度 ...
android进度条竖条,音频（audio）自定义样式以及控制操作面板
简介 audio为html5中的新属性.定义声音,比如音乐或者其他的音频流.在ie8(包括)以及更早的版本并不支持. 我的自以为一直以为自定义样式,就要添加相应的控制js代码,所以是望而却步.此次项 ...
python3 进度条_详细介绍Python进度条tqdm的使用
前言有时候在使用Python处理比较耗时操作的时候,为了便于观察处理进度,这时候就需要通过进度条将处理情况进行可视化展示,以便我们能够及时了解情况.这对于第三方库非常丰富的Python来说,想要实现 ...
Java渐变进度条_Android ProgressBar自定义图片进度，自定义渐变色进度条
java.lang.Object ↳android.view.View ↳android.widget.ProgressBar 直接子类 AbsSeekBar 间接子类 RatingBar, Seek ...
碰撞检测算法：点和矩形碰撞、点和圆形碰撞、矩形碰撞、圆形碰撞
一,原理介绍这回有点复杂,不过看懂了还是很好理解的.当然,我不敢保证这种算法在任何情况下都会起效果,如果有同学测试时,发现出现错误,请及时联系我. 我们首先来建立一个以圆心为原点的坐标系: 然后要检 ...

html5圆形进度条倒计时,时尚的圆形进度条样式的jQuery倒计时插件

html5圆形进度条倒计时,时尚的圆形进度条样式的jQuery倒计时插件相关推荐

最新文章

热门文章