Pietimer是一個可以在頁面上生成一個扇形變化的定時器插件,它基于jQuery,可以自定義定時時間秒數,自定義扇形的顏色、寬度和高度等,并且支持定時結束時回調函數,可以控制開始和暫停,適用于需要定時器的頁面如在線考試、倒計時,限時搶購等場景。
參數如下:

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 //是否逆時針轉    },    function(){      //回調函數      console.log("結束咯!");    });    $('.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/
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持武林網。
| 
 
 | 
新聞熱點
疑難解答