利用jQuery實現(xiàn)漂亮的圓形進度條倒計時插件
jQuery Final Countdown是一款時尚的圓形進度條樣式的jQuery倒計時插件。該倒計時插件可以顯示倒計時的秒、分鐘、小時和天數(shù)。它采用圓形進度條來作為倒計時的動畫,非常的時尚大方。
使用方法
該倒計時插件依賴于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結(jié)構(gòu)
該倒計時插件的HTML結(jié)構(gòu)使用下面的HTML結(jié)構(gòu),為了便于布局使用了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 插件實現(xiàn)漂亮的圓形進度條倒計時很好用,希望本篇文章對大家有所幫助,請大家持續(xù)關(guān)注本站,本站每天都有新的內(nèi)容更新。
相關(guān)文章
DOM事件階段以及事件捕獲與事件冒泡先后執(zhí)行順序(圖文詳解)
DOM事件標(biāo)準(zhǔn)定義了兩種事件流,這兩種事件流有著顯著的不同并且可能對你的應(yīng)用有著相當(dāng)大的影響。這兩種事件流分別是捕獲和冒泡。和許多Web技術(shù)一樣,在它們成為標(biāo)準(zhǔn)之前,Netscape和微軟各自不同地實現(xiàn)了它們,下面介紹DOM事件階段以及事件捕獲與事件冒泡先后執(zhí)行順序2015-08-08innerHTML與jquery里的html()區(qū)別介紹
我原本一直以為innerHTML和jquery里的html其實是完全一樣的,jquery是多此一舉了,直到我遇到一次問題2012-10-10jQuery插件simplePagination的使用方法示例
這篇文章主要介紹了jQuery插件simplePagination的使用方法,結(jié)合實例形式分析了jQuery插件simplePagination實現(xiàn)表單分頁相關(guān)操作技巧與注意事項,需要的朋友可以參考下2020-04-04在UpdatePanel內(nèi)jquery easyui效果失效的解決方法
項目中使用到了 updatePanel 和jquery-easyui 。使用updatepanel的好處自然是頁面不刷新,用戶感覺比較好,同時也減少了一部分?jǐn)?shù)據(jù)量的傳輸。2010-04-04