Fan timer with source code download Based on jQuery, jquery source code download

Fan timer with source code download Based on jQuery, jquery source code download

As follows:

Download demo source code

Pietimer is a timer that generates a slice change on the page. Based on jQuery, Pietimer can customize the timer time in seconds and the color, width, and height of slice, it also supports the callback function at the scheduled end to control the start and stop operations. It is applicable to scenarios where a timer is required, such as online examination and time-limited flash sales.

HTML

First, load the jquery library file and the 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, and the element # demo used to draw the slice image, which is then used to prompt the timed completion. boom.

<P> <a href = "#" id = "start" class = "btn"> start </a> <a href = "#" id = "pause" class = "btn"> pause </a> </p> <p id = "demo"> </p> <p class = "boom"> time is up! </P>

JQuery

First, we need to draw a slice in # demo through $ ('# demo '). pietimer () is called. The parameter seconds indicates the scheduled time (seconds). color indicates the color of the slice. You can use rgba or a hexadecimal color value, for example, # FFFFFF, width and height indicate the radius of the slice, and the following callback function indicates that the slice 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, while the actual need to trigger the timer $ ('# demo '). call pietimer ('start'). If it is also paused, it is: $ ('# demo '). pietimer ('pause'). After paused, you can 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 a small Editor to introduce all the content of the fan timer based on jQuery with source code download. I hope you like it.