基于JQuery.timer插件实现一个计时器
更新时间：2010年04月25日 16:49:37 作者：
基于JQuery.timer插件实现一个计时器，需要的朋友可以参考下。
先去官网下载jQuery Timers插件 ，然后引用到html中。这里是1.2 version
<script src="../Javascripts/Plugins/jquery.timers-1.2.js" type="text/javascript"></script>
然后是HTML，我们可以放一个hidden 的server control存值用，当然这个随你了。
<asp:HiddenField ID="hicurrenttime" runat="server" />
<h1>
jQuery Timers Test</h1>
<input type="button" id="btnmaster" value="StartTimer" />
<h2>
Demos</h2>
<div class="demos">
<span id="durationtimerspan"></span>
<br />
<input id="txtresult" 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])
停止
最后我们效果如下图：
类似的用法：
//每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
复制代码 代码如下:
<script src="../Javascripts/Plugins/jquery.timers-1.2.js" type="text/javascript"></script>
然后是HTML，我们可以放一个hidden 的server control存值用，当然这个随你了。
复制代码 代码如下:
<asp:HiddenField ID="hicurrenttime" runat="server" />
<h1>
jQuery Timers Test</h1>
<input type="button" id="btnmaster" value="StartTimer" />
<h2>
Demos</h2>
<div class="demos">
<span id="durationtimerspan"></span>
<br />
<input id="txtresult" 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])
停止
最后我们效果如下图：
类似的用法：
复制代码 代码如下:
//每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
您可能感兴趣的文章:
- 使用jquery读取html5 localstorage的值的方法
- jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
- jQuery timers计时器简单应用说明
- jquery 显示*天*时*分*秒实现时间计时器
- 基于jquery插件编写countdown计时器
- jQuery实现简单的计时器功能实例分析
- sliderToggle在写jquery的计时器setTimeouter中不生效
- jQuery实现倒计时功能 jQuery实现计时器功能
- jquery实现一个全局计时器(商城可用)
- 利用jQuery+localStorage实现一个简易的计时器示例代码
相关文章
这篇文章主要介绍了针对初学者的jQuery入门指南,jQuery是当下人气最高的JavaScript库,需要的朋友可以参考下2015-08-08
jquery加载页面的方法(页面加载完成就执行),建议大家看下windows.onload与$(document).ready之间的区别。2011-06-06
下面小编就为大家带来一篇动态设置form表单的action属性的值的简单方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-05
使用ajax在前端验证是否执行某个操作，下面为大家介绍下jquery.post的具体使用2014-01-01
表单验证一直很繁琐，特别是大点的表单，如果每个input都去单独写验证简直要写死人，最近写了一小段js统一的验证表单内容是否正确。需要的朋友可以参考下2015-09-09
ASP.NET jQuery 实例12 通过使用jQuery validation插件简单实现用户注册页面验证功能
在这节我们将使用validation插件实现注册页面的验证功能，通过这个例子，可以更全面的掌握该插件的使用功能2012-02-02
这篇文章主要介绍了JQuery给网页更换皮肤的方法,用到了jQuery页面元素获取、样式及链式操作的相关技巧,需要的朋友可以参考下2015-05-05
下面小编就为大家分享一篇jquery手机触屏滑动拼音字母城市选择器的实例代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2017-12-12
一般元素下的多个指定子元素显示隐藏效果,使用css中的选择器:nth-child()、:nth-of-type(),但如果想使用JavaScript动态控制,就需要用到jquery的filter()方法2023-08-08
在以下示例中，我将使用$.ajax()方法，使用$.get()方法也可以，但我觉得$.ajax()更好一些，代码更容易懂，并且也不怎么复杂2013-11-11
最新评论