The implementation of jquery based on the fan-shaped timer source download _jquery

Source: Internet
Author: User
Tags jquery library

The effect diagram looks like this:

Effect Demo Source Download

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> 

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> 

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:, 
  color: ' Rgba (,,,.) ', 
  height:, 
  width: 
 }, 
 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; 
 });  

The above content is a small series to introduce the implementation of jquery based on the fan timer attached to the source of all the contents of the download, I hope you like.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.