Html5添加時尚的圓形進度條樣式的倒計時插件教程

1、使用方法
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/kinetic.js"></script>
<script type="text/javascript" src="js/jquery.final-countdown.js"></script>

2、Html結構
<div class="countdown countdown-container container">
<div class="clock row">
<div class="clock-item clock-days countdown-time-value col-sm-6 col-md-3">
<div class="wrap">
<div class="inner">
<div id="canvas-days" class="clock-canvas"></div>
<div class="text">
<p class="val">0</p>
<p class="type-days type-time">DAYS</p>
</div>
</div>
</div>
</div>
<div class="clock-item clock-hours countdown-time-value col-sm-6 col-md-3">
<div class="wrap">
<div class="inner">
<div id="canvas-hours" class="clock-canvas"></div>
<div class="text">
<p class="val">0</p>
<p class="type-hours type-time">HOURS</p>
</div>
</div>
</div>
</div>
<div class="clock-item clock-minutes countdown-time-value col-sm-6 col-md-3">
<div class="wrap">
<div class="inner">
<div id="canvas-minutes" class="clock-canvas"></div>
<div class="text">
<p class="val">0</p>
<p class="type-minutes type-time">MINUTES</p>
</div>
</div>
</div><
</div>
<div class="clock-item clock-seconds countdown-time-value col-sm-6 col-md-3">
<div class="wrap">
<div class="inner">
 <div id="canvas-seconds" class="clock-canvas"></div>
<div class="text">
<p class="val">0</p>
<p class="type-seconds type-time">SECONDS</p>
</div>
</div>
</div>
</div>
</div>
</div>

3、初始化插件
$(document).ready(function() {
$('.countdown').final_countdown({
'start': 1362139200,
'end': 1388461320,
'now': 1387461319
}, function() {
// Finish Callback
 });
});    

4、配置參數
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);  

5、DATA屬性
<div class="countdown countdown-container container"
data-start="1362139200"
data-end="1388461320"
data-now="1387461319"
data-border-color="rgba(255, 255, 255, .8)">
REST OF HTML HERE
</div>   
 
KeyMob移動端廣告平臺是一個移動廣告智能管理平臺，其目的是爲IOS，Android和Windows Phone 8開發者提供一個簡單的一站式廣告管理工具，併爲開發者帶來更高的廣告收入。