JQuery Pietimer plug-in Fan timer code

Pietimer is a timer that can generate a fan change on the page, it is based on jquery, can customize the number of time seconds, custom sector color, width and height and so on, and support the timer at the end of the callback function, you can control the start and pause, for the needs of the timer pages such as online exams, A timed snapping scene.

Html

The jquery library file and the Pietimer.js file are loaded first.

<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 an element #demo to draw the pie shape, which is then used to hint at timed completion. Boom.

<p><a href= "#" id= "Start" class= "Btn" > Start </a> <a href= "#" id= "pause" class= "btn" > Suspend </a> </p>
<p id= "Demo" ></p>
<p class= "Boom" > Time! </p>

Jquery

First we're going to draw a pie in the #demo, through $ (' #demo '). Pietimer () call, the parameter seconds represents the timing time (seconds), the color represents a fan of the colors, can be set through the RGBA, can also use 16 of color values, such as #ffffff, Width and height represent the radius of the pie, followed by a callback function that triggers when the timer completes.
$ (function () {
$ ('. Boom '). Hide ();
$ (' #demo '). Pietimer ({
Seconds:60,
Color: ' rgba (0, 0, 0, 0.8) ',
HEIGHT:100,
width:100
},
function () {
$ ('. Boom '). Show (' slow ');
});

});

Of course, the code above is to draw a pie and define its associated parameter options, and the actual trigger timer requires $ (' #demo '). Pietimer (' start ') to invoke, the same pause is: $ (' #demo '). Pietimer (' pause '), After the pause 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;
   });
        
});