栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript

基于JQuery.timer插件实现一个计时器

JavaScript 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

基于JQuery.timer插件实现一个计时器

先去官网下载jQuery Timers插件 ,然后引用到html中。这里是1.2 version
复制代码 代码如下:


  然后是HTML,我们可以放一个hidden 的server control存值用,当然这个随你了。
复制代码 代码如下:


jQuery Timers Test


Demos







  加上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]
上面的代码关键的地方是我们用toggle函数,去实现点击Button开关计时器。这个插件有三个方法:
everyTime(interval : Integer | String, [label = interval : String], fn : Function, [times = 0 : Integer])
每次都执行
oneTime(interval : Integer | String, [label = interval : String], fn : Function)
执行一次
stopTime([label : Integer | String], [fn : Function])
停止
最后我们效果如下图: 
 
类似的用法:
复制代码 代码如下:
//每1秒执行函式test()
function test(){
//do something...
}
$('body').everyTime('1s',test);
//每1秒执行
$('body').everyTime('1s',function(){
//do something...
});
//每1秒执行,并命名计时器名称为A
$('body').everyTime('1s','A',function(){
//do something...
});
//每20秒执行,最多5次,并命名计时器名称为B
$('body').everyTime('2das','B',function(){
//do something...
},5);
//每20秒执行,无限次,并命名计时器名称为C
//若时间间隔抵到,但函式程序仍未完成则需等待执行函式完成后再继续计时
$('body').everyTime('2das','C',function(){
//执行一个会超过20秒以上的程式
},0,true);

//倒数10秒后执行
$('body').oneTime('1das',function(){
//do something...
});
//倒数100秒后执行,并命名计时器名称为D
$('body').oneTime('1hs','D',function(){
//do something...
});

//停止所有的在$('body')上计时器
$('body').stopTime ();
//停止$('body')上名称为A的计时器
$('body').stopTime ('A');
//停止$('body')上所有呼叫test()的计时器
$('body').stopTime (test);

希望这篇POST对您有帮助。Author: Petter Liu
转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/116147.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号