jQuery扇形定時器插件pietimer使用方法詳解
更新時間：2017年07月18日 11:48:13 投稿：lijiao
這篇文章主要為大家詳細(xì)介紹了jQuery扇形定時器插件pietimer的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
Pietimer是一個可以在頁面上生成一個扇形變化的定時器插件，它基于jQuery，可以自定義定時時間秒數(shù)，自定義扇形的顏色、寬度和高度等，并且支持定時結(jié)束時回調(diào)函數(shù)，可以控制開始和暫停，適用于需要定時器的頁面如在線考試、倒計時，限時搶購等場景。
參數(shù)如下：
demo地址： http://test.ixiewei.com/pietimer/
效果圖：
demo代碼如下：
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>pietimer-基于jQuery的扇形定時器</title>
<style type="text/css">
.start,.pause{display:block;margin:10px auto;background:#0ABF5D;border-radius:6px;width:100px;height:30px;line-height:30px;color:#fff;text-align:center}
.demo{margin:20px auto;text-align:center}
</style>
</head>
<body>
<a class="start">start開始</a>
<a class="pause">pause暫停</a>
<div class="demo"></div>
<script type="text/javascript" src="/static/lib/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="script/jquery.pietimer.min.js"></script>
<script type="text/javascript">
$(function(){
$('.demo').pietimer({
seconds: 2,
color: 'rgba(10, 191, 93, 0.8)',
height: 60,
width: 60,
//is_reversed: true //是否逆時針轉(zhuǎn)
},
function(){
//回調(diào)函數(shù)
console.log("結(jié)束咯！");
});
$('.start').click(function(){
$('.demo').pietimer('start');
return false;
});
$('.pause').click(function(){
$('.demo').pietimer('pause');
return false;
});
});
</script>
</body>
</html>
git地址：https://github.com/knorthfield/pietimer/
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了layui導(dǎo)航欄效果的實(shí)現(xiàn)代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
解決jquery實(shí)現(xiàn)的radio重新選中的問題
這篇文章主要介紹了解決jquery實(shí)現(xiàn)的radio重新選中的問題的方法和示例，十分的實(shí)用，有需要的小伙伴可以參考下。2015-07-07
這篇文章主要介紹了jquery制作LED 時鐘特效,效果非常不錯，需要的朋友可以參考下2015-02-02
精彩的彈幕效果分享給大家，具有一定的參考價值，感興趣的朋友可以嘗試制作彈幕，具體內(nèi)容如下2016-07-07
jQuery+Ajax請求本地數(shù)據(jù)加載商品列表頁并跳轉(zhuǎn)詳情頁的實(shí)現(xiàn)方法
本文通過實(shí)例代碼給大家介紹了jQuery+Ajax請求本地數(shù)據(jù)加載商品列表頁并跳轉(zhuǎn)詳情頁,需要的朋友可以參考下2017-07-07
jQuery實(shí)現(xiàn)單行文字間歇向上滾動源代碼
使用jquery實(shí)現(xiàn)的文字向上滾動效果多的不計其數(shù)吧，間歇向上滾動卻不是那么的多，所以本文簡單的實(shí)現(xiàn)了一個，感興趣的朋友可以參考下哈2013-06-06
下面小編就為大家?guī)硪黄猨query分隔Url的param方法(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
在傳統(tǒng)的Javascript里，當(dāng)我們對某個頁面元素進(jìn)行某種操作前，最好先判斷這個元素是否存在。原因是對一個不存在的元素進(jìn)行操作是不允許的。2009-08-08
fix bug:溢出之后不能回來的,添加在范圍內(nèi)移動，需要的朋友可以參考下。2011-02-02
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)簡單彈幕效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-11-11