ソース コード download_jquery を使用して jQuery に基づいて実装されたセクター タイマー

レンダリングは次のとおりです:

効果デモ ソースコードダウンロード

Pietimer は、ページ上に扇形の変化を生成できるタイマーです。jQuery に基づいており、タイミング時間を秒単位でカスタマイズしたり、扇形の色、幅、高さなどをカスタマイズしたりできます。タイミング終了時のコールバック関数。オンライン試験や期間限定の販売シナリオなど、タイマーが必要なページに適した開始と一時停止を制御します。

HTML

まず、jquery ライブラリ ファイルと pietimer.js ファイルをロードします。

<script src="jquery.min.js"></script> 
<script src="jquery.pietimer.min.js"></script> 

次に、ページに「開始」ボタンと「一時停止」ボタンを配置し、ファンのグラフィックを描画する要素 #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').pietimer() を通じて呼び出される #demo でセクターを描画する必要があります。パラメーター秒はタイミング時間 (秒) を表し、色はセクターの色を表します。これは rgba を通じて設定するか、#FFFFFF などの 16 進カラー値を使用して設定できます。幅と高さはセクターの半径を表し、後続のコールバック関数はタイミングが完了したときにトリガーされることを示します。

$(function(){  
 $('.boom').hide();  
 $('#demo').pietimer({ 
  seconds: , 
  color: 'rgba(, , , .)', 
  height: , 
  width: 
 }, 
 function(){ 
  $('.boom').show('slow'); 
 }); 
}); 

もちろん、上記のコードはセクターを描画し、それに関連するパラメーター オプションを定義しますが、実際にタイマーをトリガーするには、$('#demo').pietimer('start') を呼び出す必要があり、同じ一時停止が行われます。 : $('#demo').pietimer('pause')、一時停止した後、「開始」をクリックしてタイマーを継続することもできます。

$(function(){  
 $('a#start').click(function(){ 
  $('.boom').hide(); 
  $('#demo').pietimer('start'); 
  return false; 
 }); 
 $('a#pause').click(function(){ 
  $('#demo').pietimer('pause'); 
  return false; 
 });  
}); 

上記の内容は、編集者による jQuery ベースのファン タイマーの紹介とソース コードのダウンロードです。気に入っていただければ幸いです。