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

夏沐浠LH

夏沐浠LH

2016-02-19 13:04

下面是个超简单的基于JQuery.timer插件实现一个计时器教程,图老师小编精心挑选推荐,大家行行好,多给几个赞吧,小编吐血跪求~
先去官网下载jQuery Timers插件 ,然后引用到html中。这里是1.2 version

代码如下:

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)
script src="../Javascripts/Plugins/jquery.timers-1.2.js" type="text/javascript"/script

  然后是HTML,我们可以放一个hidden 的server control存值用,当然这个随你了。

代码如下:

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)
asp:HiddenField runat="server" /
h1
jQuery Timers Test/h1
input type="button" value="StartTimer" /
h2
Demos/h2
div
span/span
br /
input type="text" /
/div

  加上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])
停止
最后我们效果如下图:

类似的用法:

代码如下:

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)
//每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);
/***********************************************************
* oneTime(时间间隔, [计时器名称], 呼叫的函式)
***********************************************************/
//倒数10秒后执行
$('body').oneTime('1das',function(){
//do something...
});
//倒数100秒后执行,并命名计时器名称为D
$('body').oneTime('1hs','D',function(){
//do something...
});
/************************************************************
* stopTime ([计时器名称], [函式名称])
************************************************************/
//停止所有的在$('body')上计时器
$('body').stopTime ();
//停止$('body')上名称为A的计时器
$('body').stopTime ('A');
//停止$('body')上所有呼叫test()的计时器
$('body').stopTime (test);

希望这篇POST对您有帮助。Author: Petter Liu
展开更多 50%)
分享

猜你喜欢

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

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

基于jquery的一个图片hover的插件

Web开发
基于jquery的一个图片hover的插件

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

PS教程!快速学会用PS绘制一个计时器图标

PS PS教程
PS教程!快速学会用PS绘制一个计时器图标

PowerPoint制作比赛计时器

电脑网络
PowerPoint制作比赛计时器

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

人生日历新增小插件计时器提醒怎么用

电脑网络
人生日历新增小插件计时器提醒怎么用

基于JQuery的cookie插件

Web开发
基于JQuery的cookie插件

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

jQueryPad 实用的jQuery测试工具(支持IE,chrome,FF)

jQueryPad 实用的jQuery测试工具(支持IE,chrome,FF)

jQuery温习篇 强大的JQuery选择器

jQuery温习篇 强大的JQuery选择器
下拉加载更多内容 ↓