Sector timer implemented based on jQuery with source code download_jquery

The rendering is as follows:

Effect demonstration Source code download

Pietimer is a timer that can generate a fan-shaped change on the page. It is based on jQuery and can customize the timing time in seconds, customize the fan-shaped color, width and height, etc., and supports a callback function when the timing ends. Control start and pause, suitable for pages that require timers, such as online exams and limited time sales scenarios.

HTML

First load the jquery library file and pietimer.js file.

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

Then we place a "Start" and a "Pause" button on the page, as well as the element #demo for drawing fan graphics, and then the .boom to prompt for scheduled completion.

<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

First we need to draw a sector in #demo, which is called through $('#demo').pietimer(). The parameter seconds represents the timing time (seconds), and color represents the color of the sector. It can be set through rgba, or Using hexadecimal color values, such as #FFFFFF, width and height represent the radius of the sector, and the subsequent callback function indicates that it is triggered when the timing is completed.

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

Of course, the above code draws a sector and defines its related parameter options, but to actually trigger the timer, you need to call $('#demo').pietimer('start'), and the same pause is: $('#demo').pietimer('pause'), after pausing, you can also click "Start" to continue the timer.

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

The above content is the editor’s introduction to the fan timer based on jQuery with source code download. I hope you like it.