>웹 프론트엔드 >JS 튜토리얼 >JQuery.timer 플러그인_jquery를 기반으로 타이머 구현

JQuery.timer 플러그인_jquery를 기반으로 타이머 구현

WBOY
WBOY원래의
2016-05-16 18:28:451360검색

먼저 공식 홈페이지에 가서 jQuery Timers 플러그인을 다운로드한 후 HTML로 인용해 보세요. 버전 1.2입니다.

코드 복사 코드는 다음과 같습니다.



그런 다음 HTML에 숨겨진 서버 컨트롤을 넣을 수 있습니다. 예, 물론 그것은 귀하에게 달려 있습니다.
코드 복사 코드는 다음과 같습니다.



jQuery 타이머 테스트




데모



;br / >



 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('기간: ' countnum)
$('#<%=hicurrenttime.ClientID %>').val(countnum)
}); },
function() {
$(this).val('StartTimer')
$('#durationtimerspan').stopTime('testtimer')
$('#txtresult ') .val(countnum);
});
})
[html]
위 코드의 핵심은 클릭 버튼 전환 타이머를 구현하는 것입니다. . 이 플러그인에는 세 가지 메서드가 있습니다.
everyTime(interval : Integer | String, [label = Interval : String], fn : Function, [times = 0 : Integer])
Execute
oneTime(interval Every time : Integer | String, [label = Interval : String], fn : Function)
한 번 실행
stopTime([label : Integer | String], [fn : Function])
Stop
마침내 우리 효과는 다음과 같습니다:


유사한 사용법: JQuery.timer 플러그인_jquery를 기반으로 타이머 구현

//1초마다 function test() 실행
function test(){
//뭔가를 하세요...
}
$ (' body').everyTime('1s',test);
//1초마다 실행
$('body').everyTime('1s',function(){
//do Something..
})
//1초마다 실행하고 타이머 이름을 A
$('body').everyTime('1s','A',function(){
//뭔가를 하세요...
})
//20초마다 최대 5번 실행하고 타이머 이름은 B
$('body').everyTime('2das ','B',function(){
//뭔가를 하세요...
},5)
//20초마다 무제한으로 실행하고 타이머 이름을 C
로 지정합니다. //시간 간격에 도달했지만 함수 프로그램이 완료되지 않은 경우 시간을 계속하기 전에 함수 실행이 완료될 때까지 기다려야 합니다.
$('body').everyTime('2das',' C',function() {
//20초 이상 걸리는 프로그램 실행
},0,true)
/**************************************************** * *******
* oneTime(시간 간격, [타이머 이름], 호출되는 함수)
******************** ** **************************************/
//다음 이후 실행 10초 카운트다운
$ ('body').oneTime('1das',function(){
//뭔가를 하세요...
})
//100초 카운트다운 후 실행 , 그리고 타이머 이름을 D
$('body').oneTime('1hs','D',function(){
//뭔가를 하세요...
}); **************************************************** * ********
* stopTime ([타이머 이름], [함수 이름])
************************ ** **************************************** /
//$('body')에서 모든 타이머 중지
$('body').stopTime ()
//$('에서 A라는 타이머 중지; body') 타이머
$('body').stopTime ('A')
//$('body')
$('body')에서 test()를 호출하는 모든 타이머를 중지합니다. . stopTime (테스트);


이 게시물이 도움이 되기를 바랍니다. 저자:페터 리우
성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.