jQuery扇形定時(shí)器插件pietimer使用方法詳解
Pietimer是一個(gè)可以在頁面上生成一個(gè)扇形變化的定時(shí)器插件,它基于jQuery,可以自定義定時(shí)時(shí)間秒數(shù),自定義扇形的顏色、寬度和高度等,并且支持定時(shí)結(jié)束時(shí)回調(diào)函數(shù),可以控制開始和暫停,適用于需要定時(shí)器的頁面如在線考試、倒計(jì)時(shí),限時(shí)搶購(gòu)等場(chǎng)景。
參數(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/
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
解決jquery實(shí)現(xiàn)的radio重新選中的問題
這篇文章主要介紹了解決jquery實(shí)現(xiàn)的radio重新選中的問題的方法和示例,十分的實(shí)用,有需要的小伙伴可以參考下。2015-07-07jQuery+Ajax請(qǐng)求本地?cái)?shù)據(jù)加載商品列表頁并跳轉(zhuǎn)詳情頁的實(shí)現(xiàn)方法
本文通過實(shí)例代碼給大家介紹了jQuery+Ajax請(qǐng)求本地?cái)?shù)據(jù)加載商品列表頁并跳轉(zhuǎn)詳情頁,需要的朋友可以參考下2017-07-07jQuery實(shí)現(xiàn)單行文字間歇向上滾動(dòng)源代碼
使用jquery實(shí)現(xiàn)的文字向上滾動(dòng)效果多的不計(jì)其數(shù)吧,間歇向上滾動(dòng)卻不是那么的多,所以本文簡(jiǎn)單的實(shí)現(xiàn)了一個(gè),感興趣的朋友可以參考下哈2013-06-06jQuery實(shí)現(xiàn)簡(jiǎn)單彈幕效果
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)簡(jiǎn)單彈幕效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-11-11