jQuery扇形定時(shí)器插件pietimer使用方法詳解
更新時(shí)間：2017年07月18日 11:48:13 投稿：lijiao
這篇文章主要為大家詳細(xì)介紹了jQuery扇形定時(shí)器插件pietimer的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
Pietimer是一個可以在頁面上生成一個扇形變化的定時(shí)器插件，它基于jQuery，可以自定義定時(shí)時(shí)間秒數(shù)，自定義扇形的顏色、寬度和高度等，并且支持定時(shí)結(jié)束時(shí)回調(diào)函數(shù)，可以控制開始和暫停，適用于需要定時(shí)器的頁面如在線考試、倒計(jì)時(shí)，限時(shí)搶購等場景。
參數(shù)如下：
demo地址： http://test.ixiewei.com/pietimer/
效果圖：
demo代碼如下：
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>pietimer-基于jQuery的扇形定時(shí)器</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 //是否逆時(shí)針轉(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)文章
jquery動態(tài)增加text元素以及刪除文本內(nèi)容實(shí)例代碼
這段代碼是通過jquery動態(tài)增加限定數(shù)額的text，以及清除文本內(nèi)容，用到了after()方法追加元素，具體實(shí)現(xiàn)如下，感興趣的朋友可以參考下哈，希望對大家有所幫助2013-07-07
Jquery和angularjs獲取check框選中的值的方法匯總
本文分別通過具體的實(shí)例向大家展示了jquery和angularjs獲取獲取check框選中的值的方法，非常的簡單實(shí)用，有需要的小伙伴可以參考下2016-01-01
實(shí)例代碼講解jquery easyui動態(tài)tab頁
這篇文章主要介紹了實(shí)例代碼講解jquery easyui動態(tài)tab頁的相關(guān)資料,需要的朋友可以參考下2015-11-11
jQuery圖片切換插件jquery.cycle.js使用示例
Cycle供了非常好的功能來幫助大家更簡單的使用插件的幻燈功能，下面是它的一個非常不錯的示例，大家可以學(xué)習(xí)下2014-06-06
基于jQuery實(shí)現(xiàn)交互體驗(yàn)社會化分享代碼附源碼下載
基于jQuery實(shí)現(xiàn)交互體驗(yàn)社會化分享代碼附源碼下載。這是一款鼠標(biāo)點(diǎn)擊分享按鈕向右滑出騰訊微博，新浪微博，QQ空間，豆瓣，微信，二維碼分享等分享平臺，本段代碼比較實(shí)用，需要的朋友參考下吧2016-01-01
jquery實(shí)現(xiàn)最簡單的滑動菜單效果代碼
這篇文章主要介紹了jquery實(shí)現(xiàn)最簡單的滑動菜單效果代碼,涉及jQuery基于鼠標(biāo)事件操作頁面元素動態(tài)變換的基本技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09
jqGrid翻頁時(shí)數(shù)據(jù)選中丟失問題的解決辦法
我在項(xiàng)目中使用jqGrid時(shí)，采用異步加載服務(wù)器數(shù)據(jù)，例如點(diǎn)擊翻頁、搜索時(shí)都重新加載數(shù)據(jù)。這篇文章主要介紹了jqGrid翻頁時(shí)數(shù)據(jù)選中丟失問題,需要的朋友可以參考下2017-02-02
jQuery點(diǎn)擊自身以外地方關(guān)閉彈出層的簡單實(shí)例
本篇文章主要是對jQuery點(diǎn)擊自身以外地方關(guān)閉彈出層的簡單實(shí)例進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
EasyUI折疊表格層次顯示detailview詳解及實(shí)例
這篇文章主要介紹了EasyUI折疊表格層次顯示detailview詳解及實(shí)例,非常不錯，具有參考借鑒價(jià)值，需要的朋友參考下吧2016-12-12
jquery 子窗口操作父窗口的實(shí)現(xiàn)代碼。2009-09-09