jQuery Final Countdown是一款時尚的圓形進度條樣式的jQuery倒計時插件。該倒計時插件可以顯示倒計時的秒、分鐘、小時和天數。它采用圓形進度條來作為倒計時的動畫，非常的時尚大方。
使用方法
該倒計時插件依賴于jQuery和KineticJS-一個HTML5 Canvas庫。使用是要將它們引入。
<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>
HTML結構
該倒計時插件的HTML結構使用下面的HTML結構，為了便于布局使用了Bootstrap作為框架。
<div class="countdown countdown-container container"> <div class="clock row"> <div class="clock-item clock-days countdown-time-value col-sm- col-md-"> <div class="wrap"> <div class="inner"> <div id="canvas-days" class="clock-canvas"></div> <div class="text"> <p class="val"></p> <p class="type-days type-time">DAYS</p> </div><!-- /.text --> </div><!-- /.inner --> </div><!-- /.wrap --> </div><!-- /.clock-item --> <div class="clock-item clock-hours countdown-time-value col-sm- col-md-"> <div class="wrap"> <div class="inner"> <div id="canvas-hours" class="clock-canvas"></div> <div class="text"> <p class="val"></p> <p class="type-hours type-time">HOURS</p> </div><!-- /.text --> </div><!-- /.inner --> </div><!-- /.wrap --> </div><!-- /.clock-item --> <div class="clock-item clock-minutes countdown-time-value col-sm- col-md-"> <div class="wrap"> <div class="inner"> <div id="canvas-minutes" class="clock-canvas"></div> <div class="text"> <p class="val"></p> <p class="type-minutes type-time">MINUTES</p> </div><!-- /.text --> </div><!-- /.inner --> </div><!-- /.wrap --> </div><!-- /.clock-item --> <div class="clock-item clock-seconds countdown-time-value col-sm- col-md-"> <div class="wrap"> <div class="inner"> <div id="canvas-seconds" class="clock-canvas"></div> <div class="text"> <p class="val"></p> <p class="type-seconds type-time">SECONDS</p> </div><!-- /.text --> </div><!-- /.inner --> </div><!-- /.wrap --> </div><!-- /.clock-item --> </div><!-- /.clock --></div><!-- /.countdown-wrapper -->
以上代碼很簡單吧，使用jQuery Final Countdown 插件實現漂亮的圓形進度條倒計時很好用，希望本篇文章對大家有所幫助，請大家持續關注本站，本站每天都有新的內容更新。
新聞熱點
疑難解答
