HTML5 Add stylish round progress bar style Countdown Plugin Tutorial

I. Methods of Use
<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>

Second, HTML structure
<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>

Third, initialize the plug-in
$ (document). Ready (function () {
$ ('. Countdown '). Final_countdown ({
' Start ': 1362139200,
' End ': 1388461320,
' Now ': 1387461319
}, function () {
Finish Callback
});
});

Four, configuration parameters
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);

V. Data properties
<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>

The Keymob mobile advertising platform is a mobile advertising intelligence management platform designed to provide ios,android and Windows Phone 8 developers with a simple one-stop advertising management tool and a higher advertising revenue for developers.

HTML5 Add stylish round progress bar style Countdown Plugin Tutorial