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

Source: Internet
Author: User

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.

Related Article

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.