jQuery Final Countdown是一款时尚的圆形进度条样式的jQuery倒计时插件。该倒计时插件可以显示倒计时的秒、分钟、小时和天数。它采用圆形进度条来作为倒计时的动画,非常的时尚大方。
在线预览 源码下载
使用方法该倒计时插件依赖于jQuery和KineticJS-一个HTML5 Canvas库。使用是要将它们引入。
<scripttype="text/javascript"src="js/jquery.min.js"></script><scripttype="text/Javascript"src="js/kinetic.js"></script><scripttype="text/javascript"src="js/jquery.final-countdown.js"></script>
HTML结构该倒计时插件的HTML结构使用下面的HTML结构,为了便于布局使用了Bootstrap作为框架。
<divclass="countdown countdown-container container"><divclass="clock row"><divclass="clock-item clock-days countdown-time-value col-sm-6 col-md-3"><divclass="wrap"><divclass="inner"><divid="canvas-days"class="clock-canvas"></div><divclass="text"><pclass="val">0</p><pclass="type-days type-time">DAYS</p></div><!--/.text--></div><!--/.inner--></div><!--/.wrap--></div><!--/.clock-item--><divclass="clock-item clock-hours countdown-time-value col-sm-6 col-md-3"><divclass="wrap"><divclass="inner"><divid="canvas-hours"class="clock-canvas"></div><divclass="text"><pclass="val">0</p><pclass="type-hours type-time">HOURS</p></div><!--/.text--></div><!--/.inner--></div><!--/.wrap--></div><!--/.clock-item--><divclass="clock-item clock-minutes countdown-time-value col-sm-6 col-md-3"><divclass="wrap"><divclass="inner"><divid="canvas-minutes"class="clock-canvas"></div><divclass="text"><pclass="val">0</p><pclass="type-minutes type-time">MINUTES</p></div><!--/.text--></div><!--/.inner--></div><!--/.wrap--></div><!--/.clock-item--><divclass="clock-item clock-seconds countdown-time-value col-sm-6 col-md-3"><divclass="wrap"><divclass="inner"><divid="canvas-seconds"class="clock-canvas"></div><divclass="text"><pclass="val">0</p><pclass="type-seconds type-time">SECONDS</p></div><!--/.text--></div><!--/.inner--></div><!--/.wrap--></div><!--/.clock-item--></div><!--/.clock--></div><!--/.countdown-wrapper-->
via:http://www.w2bc.com/article/jQuery-Final-Countdown