Implement a timer based on Jquery.timer plug-in _jquery

Source: Internet
Author: User
Tags time interval
First go to the website to download the jquery Timers plugin, and then refer to the HTML. This is 1.2 version.
Copy Code code as follows:

<script src= ". /javascripts/plugins/jquery.timers-1.2.js "type=" Text/javascript "></script>

And then there's the HTML, and we can put a hidden server control stored value, of course this is up to you.
Copy Code code as follows:

<asp:hiddenfield id= "Hicurrenttime" runat= "Server"/>
JQuery Timers Test<input type= "button" id= "Btnmaster" value= "Starttimer"/>
Demos<div class= "Demos" >
<span id= "Durationtimerspan" ></span>
<br/>
<input id= "Txtresult" type= "text"/>
</div>

Plus JS:
[/code]
$ (document). Ready (function () {
var countnum = <%=hicurrenttime. Value%>;
$ (' #btnmaster '). Toggle (
function () {
$ (this). Val (' Stoptimer ');
$ (' #durationtimerspan '). EveryTime (1000, ' Testtimer ', function (i) {
Countnum = Countnum + 1;
$ (this). html (' Duration: ' + countnum);
$ (' #<%=hicurrenttime. ClientID%> '). Val (Countnum);
});
},
function () {
$ (this). Val (' Starttimer ');
$ (' #durationtimerspan '). StopTime (' Testtimer ');
$ (' #txtresult '). Val (Countnum);
});
});
[HTML]
The key point of the above code is that we use the toggle function to implement the click button Switch Timer. This plugin has three methods:
EveryTime (Interval:integer | String, [label = Interval:string], fn:function, [times = 0:integer])
Execute each time
Onetime (Interval:integer | String, [label = interval:string], fn:function)
Perform one
StopTime ([Label:integer | String], [fn:function])
Stop it
Finally we effect the following figure:

Similar usage:
Copy Code code as follows:

Execute function Test () every 1 seconds
function Test () {
Do something ...
}
$ (' body '). everyTime (' 1s ', test);
Performed every 1 seconds
$ (' body '). everyTime (' 1s ', function () {
Do something ...
});
Execute every 1 seconds and name the timer named a
$ (' body '). everyTime (' 1s ', ' A ', function () {
Do something ...
});
Execute every 20 seconds, up to 5 times, and name the timer named B
$ (' body '). EveryTime (' 2das ', ' B ', function () {
Do something ...
},5);
Execute every 20 seconds, infinite number of times, and name the timer named C
If the time interval arrives, but the function is still incomplete, wait for the execution function to complete before continuing the timer
$ (' body '). EveryTime (' 2das ', ' C ', function () {
Execute a program that will last more than 20 seconds
},0,true);
/***********************************************************
* Onetime (time interval, [timer name], call function)
***********************************************************/
Minus 10 seconds to execute.
$ (' body '). Onetime (' 1das ', function () {
Do something ...
});
Execute after 100 seconds, and name the timer named D
$ (' body '). Onetime (' 1hs ', ' D ', function () {
Do something ...
});
/************************************************************
* STOPTIME ([timer name], [function name])
************************************************************/
Stop all the timers on the $ (' body ')
$ (' body '). StopTime ();
Stop the timer named a on $ (' body ')
$ (' body '). StopTime (' A ');
Stop timer for all call Test () on $ (' body ')
$ (' body '). StopTime (test);

I hope this post is helpful to you. Author:petter Liu

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.