基于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

基于JQuery.timer插件实现一个计时器的更多相关文章

  1. 基于jquery fly插件实现加入购物车抛物线动画效果,jquery.fly.js

    在购物网站中,加入购物车的功能是必须的功能,有的网站在用户点击加入购物车按钮时,就会出现该商品从点击出以抛物线的动画相似加入购物车,这个功能看起来非常炫,对用户体验也有一定的提高.下面介绍基于jque ...

  2. 基于 jQuery Jcrop 插件的功能模块:头像剪裁

    /** Jcrop version: 0.9.12 jQuery version: 1.9.0 Author: 小dee Date: 2014.10.30 */ 先看看他山之石:博客园的头像模块也是使 ...

  3. 基于jquery的插件turn.js学习笔记

    基于jquery的插件turn.js学习笔记 简介 turn.js是一个可以实现3d书籍展示效果的jq插件,使用html5和css3来执行效果.可以很好的适应于ios和安卓等触摸设备. How it ...

  4. 基于jQuery日历插件制作日历

    这篇文章主要介绍了基于jQuery日历插件制作日历的相关资料,需要的朋友可以参考下 来看下最终效果图吧: 是长得丑了一点,不要吐槽我-.- 首先来说说这个日历主要的制作逻辑吧: ·一个月份最多有31天 ...

  5. 基于jquery 移动插件的实现

    引用谢灿勇 地址  http://www.cnblogs.com/st-leslie/p/6002148.html 一个思路分析:大致上实现的思路有以下两种. 一.判断块是否被按下(mousedown ...

  6. JQuery 定时器 (Jquery Timer 插件)

      jQuery Timers插件地址: http://plugins.jquery.com/project/timers JQuery Timers应用知识提供了三个函式1. everyTime(时 ...

  7. 编写基于jQuery的插件的方法

    注意:jQuery中有一个extend的方法,这个方法是添加js对象字段的,下面会多次用到 1:添加全局类的方法 常用的ajax就是该类插件,下面要编写一个简单的加法和减法的基于jQuery的方法 $ ...

  8. 基于jquery分页插件

    今天终于完成了基于jquery的分页插件的代码编写,也通过了功能测试,实现了分页功能:由于刚开始写jquery的插件,所以梳理逻辑的时间也很长,整个过程整整一周时间,今天终于搞完了,先将整个分页插件的 ...

  9. 一款基于jQuery日历插件的开发过程

    这个插件的设置选项,所有样式都设置成自定义,提供回调函数,方便在外部进行扩展 css设置是可变的  也就是说  日历的样式是定制的: /******************************** ...

随机推荐

  1. python dict

    ###字典的基本结构 info = { "k1" : "v1", "k2" : "v2" } ###字典的valus可以 ...

  2. 1029. Median (25)

    分析: 考察归并排序,用简单的快排会超时. #include <iostream> #include <stdio.h> #include <algorithm> ...

  3. vsftpd的主动模式与被动模式

    好不容易配置好了vsftpd服务,在CentOS本机测试没有问题,但是在我的Windows机器上使用FlashFXP连接的时候却出问题了: 我虽然知道FTP存在两种模式:PORT(主动)模式.PASV ...

  4. Apache 常用伪静态配置

    1. /a/b?c=d => index.php?_a=a&_m=b&c=d 2. /xxx/detail-yyy.html => index.php?_a=xxx& ...

  5. 5.18-5.22js调制样式

    这次主要是通过改变列表的浮动值来实现点击跳动效果,因为是点击列表的的每一个li都可跳动整个列表,所以是双for循环,第一个是控制点击事件,第二个是循环改变每个li的flot值.另外要改变每次点击后的点 ...

  6. Please set registry key HKLM\Microsoft\.NET Framework\InstallRoot to point to the .NET Framework

    安装.NET程序时会提示“Please set registry key HKLM\Microsoft\.NET Framework\InstallRoot to point to the .NET ...

  7. Hibernate映射问题之OneToOne【自己整理】

    首先贴上一个MkYong的例子 stock.java package com.mkyong.stock; import javax.persistence.CascadeType; import ja ...

  8. HDU 2019 数列有序!

    Time Limit: 1000 MS Memory Limit: 32768 KB 64-bit integer IO format: %I64d , %I64u   Java class name ...

  9. iOS 直播(一)

    由于业务需求,需要从腾讯直播sdk要迅速转移到自主开发(先让我默哀三分钟).不多说,直接开始唠嗑! 这个项目超级简单,简单到只能一个推流,一个拉流的功能.需求多的再另谈. 前期准备:推流用优酷开源的L ...

  10. 安装mysql数据库中的技巧、错误排查以及实用命令(持续更新)

    针对解压版本5.7.16(博主使用的这个版本.在某些低版本中部分命令失效) 一.初始化data目录(解压版解压后没有data目录) mysqld --initialize-insecure --use ...