Html5添加时尚的圆形进度条样式的倒计时插件教程

一、使用方法




二、Html结构

0

DAYS

0

HOURS

0

MINUTES

<

 

0

SECONDS

三、初始化插件
$(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属性

data-start="1362139200"
data-end="1388461320"
data-now="1387461319"
data-border-color="rgba(255, 255, 255, .8)">
REST OF HTML HERE

   
 
KeyMob移动端广告平台是一个移动广告智能管理平台，其目的是为IOS，Android和Windows Phone 8开发者提供一个简单的一站式广告管理工具，并为开发者带来更高的广告收入。