基于jQuery實現(xiàn)的扇形定時器附源碼下載
效果圖如下所示：
Pietimer是一個可以在頁面上生成一個扇形變化的定時器，它基于jQuery，可以自定義定時時間秒數(shù)，自定義扇形的顏色、寬度和高度等，并且支持定時結(jié)束時回調(diào)函數(shù)，可以控制開始和暫停，適用于需要定時器的頁面如在線考試、限時搶購的場景。
HTML
首先加載jquery庫文件和pietimer.js文件。
<script src="jquery.min.js"></script> <script src="jquery.pietimer.min.js"></script>
然后我們在頁面上放置一個“開始”和一個“暫?！卑粹o，以及用來繪制扇形圖形的元素#demo，然后就是用來提示定時完成的.boom。
<p><a href="#" id="start" class="btn">開始</a> <a href="#" id="pause" class="btn">暫停</a></p> <p id="demo"></p> <p class="boom">時間到！</p>
jQuery
首先我們要在#demo中繪制扇形，通過$('#demo').pietimer()調(diào)用，參數(shù)seconds表示定時時間（秒），color表示扇形的顏色，可以通過rgba來設(shè)置，也可以使用16進制顏色值，如#FFFFFF，width和height表示扇形的半徑，緊接著的回調(diào)函數(shù)表示定時完成了時觸發(fā)。
$(function(){
$('.boom').hide();
$('#demo').pietimer({
seconds: ,
color: 'rgba(, , , .)',
height: ,
width:
},
function(){
$('.boom').show('slow');
});
});
當然，上面的代碼是繪制了一個扇形以及定義其相關(guān)參數(shù)選項，而實際要觸發(fā)定時器則需要$('#demo').pietimer('start')來調(diào)用，同樣暫停則是：$('#demo').pietimer('pause')，暫停后還可以點擊“開始”繼續(xù)定時器。
$(function(){
$('a#start').click(function(){
$('.boom').hide();
$('#demo').pietimer('start');
return false;
});
$('a#pause').click(function(){
$('#demo').pietimer('pause');
return false;
});
});
以上內(nèi)容是小編給大家介紹基于jQuery實現(xiàn)的扇形定時器附源碼下載的全部內(nèi)容，希望大家喜歡。
相關(guān)文章
jquery+swiper組件實現(xiàn)時間軸滑動年份tab切換效果
這篇文章主要介紹了jquery+swiper組件實現(xiàn)時間軸滑動年份tab切換效果,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-12-12
dreamweaver 8實現(xiàn)Jquery自動提示
這篇文章主要介紹了dreamweaver 8實現(xiàn)Jquery自動提示的方法,需要的朋友可以參考下2014-12-12
這篇文章主要介紹了jQuery實現(xiàn)的模擬彈出窗口功能,結(jié)合實例形式分析了jQuery彈出窗口的初始化、坐標、背景設(shè)置等相關(guān)操作技巧,需要的朋友可以參考下2016-11-11
jQuery插件Skippr實現(xiàn)焦點圖幻燈片特效
Skippr 是一個超級簡單的 jQuery 幻燈片插件。只是包括你的網(wǎng)頁中引入 jquery.skippr.css 和 jquery.skippr.js 文件就能使用了。Skippr 能夠自適應窗口寬度，而且導航是獨特的條形導航。2015-04-04
Jquery創(chuàng)建層顯示標題和內(nèi)容且隨鼠標移動而移動
本文為大家介紹下使用Jquery創(chuàng)建一個層顯示標題的內(nèi)容且隨鼠標移動，具體的實現(xiàn)如下2014-01-01
這篇文章主要介紹了jquery 遍歷hash操作,結(jié)合實例形式分析了jQuery基于ajax交互獲取并遍歷hash相關(guān)操作技巧,需要的朋友可以參考下2019-10-10
jQuery插件windowScroll實現(xiàn)單屏滾動特效
本文給大家分享的是一個使用jQuery插件windowScroll實現(xiàn)的單屏滾動的特效，主要參考搜狗瀏覽器4.2版本首頁的上下滾動效果。主要實現(xiàn)整個窗口的上下和左右滾動邏輯，非常的實用。2015-07-07
點擊左右按鈕圖片橫向滾動jquery，一次滾動四個，圖片滾動完成，自動回到第一個版面，效果相當不錯，感興趣的前端工程師們可以參考下2013-04-04
本文給大家分享的是使用jQuery插件animateSlide制作多點滑動幻燈片特效，十分的炫酷，有需要的小伙伴可以參考下2015-06-06
jquery實現(xiàn)頁面百葉窗走馬燈式翻滾顯示效果的方法
這篇文章主要介紹了jquery實現(xiàn)頁面百葉窗走馬燈式翻滾顯示效果的方法,實例分析了jQuery操作百葉窗翻滾效果的實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03