利用jQuery實(shí)現(xiàn)漂亮的圓形進(jìn)度條倒計(jì)時(shí)插件
jQuery Final Countdown是一款時(shí)尚的圓形進(jìn)度條樣式的jQuery倒計(jì)時(shí)插件。該倒計(jì)時(shí)插件可以顯示倒計(jì)時(shí)的秒、分鐘、小時(shí)和天數(shù)。它采用圓形進(jìn)度條來作為倒計(jì)時(shí)的動(dòng)畫,非常的時(shí)尚大方。
使用方法
該倒計(jì)時(shí)插件依賴于jQuery和KineticJS-一個(gè)HTML5 Canvas庫(kù)。使用是要將它們引入。
<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)
該倒計(jì)時(shí)插件的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 -->
以上代碼很簡(jiǎn)單吧,使用jQuery Final Countdown 插件實(shí)現(xiàn)漂亮的圓形進(jìn)度條倒計(jì)時(shí)很好用,希望本篇文章對(duì)大家有所幫助,請(qǐng)大家持續(xù)關(guān)注本站,本站每天都有新的內(nèi)容更新。
- jquery 簡(jiǎn)單的進(jìn)度條實(shí)現(xiàn)代碼
- 6款新穎的jQuery和CSS3進(jìn)度條插件推薦
- 分享8款優(yōu)秀的 jQuery 加載動(dòng)畫和進(jìn)度條插件
- jquery實(shí)現(xiàn)的一個(gè)簡(jiǎn)單進(jìn)度條效果實(shí)例
- 基于HTML5 Ajax文件上傳進(jìn)度條如何實(shí)現(xiàn)(jquery版本)
- Javascript jquery css 寫的簡(jiǎn)單進(jìn)度條控件
- jQuery EasyUI API 中文文檔 - ProgressBar 進(jìn)度條
- jQuery實(shí)現(xiàn)文件上傳進(jìn)度條特效
- jQuery監(jiān)聽文件上傳實(shí)現(xiàn)進(jìn)度條效果的方法
- jquery實(shí)現(xiàn)百分比記分進(jìn)度條
相關(guān)文章
DOM事件階段以及事件捕獲與事件冒泡先后執(zhí)行順序(圖文詳解)
DOM事件標(biāo)準(zhǔn)定義了兩種事件流,這兩種事件流有著顯著的不同并且可能對(duì)你的應(yīng)用有著相當(dāng)大的影響。這兩種事件流分別是捕獲和冒泡。和許多Web技術(shù)一樣,在它們成為標(biāo)準(zhǔn)之前,Netscape和微軟各自不同地實(shí)現(xiàn)了它們,下面介紹DOM事件階段以及事件捕獲與事件冒泡先后執(zhí)行順序2015-08-08innerHTML與jquery里的html()區(qū)別介紹
我原本一直以為innerHTML和jquery里的html其實(shí)是完全一樣的,jquery是多此一舉了,直到我遇到一次問題2012-10-10zTree樹形菜單交互選項(xiàng)卡效果的實(shí)現(xiàn)方法
下面小編就為大家分享一篇zTree樹形菜單交互選項(xiàng)卡效果的實(shí)現(xiàn)方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2017-12-12jQuery插件simplePagination的使用方法示例
這篇文章主要介紹了jQuery插件simplePagination的使用方法,結(jié)合實(shí)例形式分析了jQuery插件simplePagination實(shí)現(xiàn)表單分頁(yè)相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下2020-04-04在UpdatePanel內(nèi)jquery easyui效果失效的解決方法
項(xiàng)目中使用到了 updatePanel 和jquery-easyui 。使用updatepanel的好處自然是頁(yè)面不刷新,用戶感覺比較好,同時(shí)也減少了一部分?jǐn)?shù)據(jù)量的傳輸。2010-04-04酷炫jQuery全屏3D焦點(diǎn)圖動(dòng)畫效果
這篇文章主要介紹了一款非??犰诺膉Query全屏3D焦點(diǎn)圖動(dòng)畫效果其特點(diǎn)是整個(gè)焦點(diǎn)圖基本是全屏顯示的,非常大氣,感興趣的小伙伴們可以參考一下2016-03-03