Home  >  Article  >  Web Front-end  >  Implement a timer based on JQuery.timer plug-in_jquery

Implement a timer based on JQuery.timer plug-in_jquery

WBOY
WBOYOriginal
2016-05-16 18:28:451319browse

First go to the official website to download the jQuery Timers plug-in, and then quote it into html. Here is version 1.2

Copy code The code is as follows:



Then in HTML, we can put a hidden server control to store the value Yes, of course it’s up to you.
Copy code The code is as follows:



jQuery Timers Test




Demos









 Add 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 plug-in has three methods:
everyTime(interval : Integer | String, [label = interval : String], fn : Function, [times = 0 : Integer])
Execute
oneTime(interval every time : Integer | String, [label = interval : String], fn : Function)
Execute once
stopTime([label : Integer | String], [fn : Function])
Stop
Finally we The effect is as follows:
Implement a timer based on JQuery.timer plug-in_jquery
Similar usage:
Copy code Code As follows:

//Execute function test() every 1 second
function test(){
//do something...
}
$(' body').everyTime('1s',test);
//Execute every 1 second
$('body').everyTime('1s',function(){
//do something. ..
});
//Execute every 1 second, and name the timer A
$('body').everyTime('1s','A',function(){
//do something...
});
//Execute every 20 seconds, up to 5 times, and name the timer as B
$('body').everyTime('2das ','B',function(){
//do something...
},5);
//Execute every 20 seconds, unlimited times, and name the timer as C
//If the time interval is reached but the function program has not been completed, you need to wait for the execution of the function to complete before continuing to time
$('body').everyTime('2das','C',function() {
//Execute a program that will take more than 20 seconds
},0,true);
/***************************************************** *******
* oneTime(time interval, [timer name], called function)
******************** ****************************************/
//Execute after 10 seconds countdown
$ ('body').oneTime('1das',function(){
//do something...
});
//Execute after 100 seconds of countdown, and name the timer D
$('body').oneTime('1hs','D',function(){
//do something...
});
/***************************************************** ********
* stopTime ([timer name], [function name])
************************ **************************************** /
//Stop all timers on $('body')
$('body').stopTime ();
//Stop the timer named A on $('body') Timer
$('body').stopTime ('A');
//Stop all timers that call test() on $('body')
$('body'). stopTime (test);

Hope this POST is helpful to you. Author:Petter Liu
Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn