先去官网​​下载jQuery Timers​​插件 ，然后引用到html中。这里是1.2 version

<script src="../Javascripts/Plugins/jquery.timers-1.2.js" type="text/javascript"></script>



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


1:       <asp:HiddenField ID="hicurrenttime" runat="server" />
2:          <h1>
3:              jQuery Timers Test</h1>
4:          <input type="button" id="btnmaster" value="StartTimer" />
5:          <h2>
6:              Demos</h2>
7:          <div class="demos">
8:              <span id="durationtimerspan"></span>
9:              <br />
10:              <input id="txtresult" type="text" />
11:          </div>


　　加上JS：


1:          $(document).ready(function() {
2:              var countnum = <%=hicurrenttime.Value %>;
3:
4:              $('#btnmaster').toggle(
5:                  function() {
6:                          $(this).val('StopTimer');
7:                          $('#durationtimerspan').everyTime(1000, 'testtimer', function(i) {
8:                              countnum = countnum + 1;
9:                              $(this).html('Duration: ' + countnum);
10:                              $('#<%=hicurrenttime.ClientID %>').val(countnum);
11:                          });
12:
13:                  },
14:  function() {
15:          $(this).val('StartTimer');
16:         $('#durationtimerspan').stopTime('testtimer');
17:         $('#txtresult').val(countnum);
18:  });
19:
20:          });


    上面的代码关键的地方是我们用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:  //每1秒执行函式test()
2:  function test(){
3:     //do something...
4:  }
5:  $('body').everyTime('1s',test);
6:
7:  //每1秒执行
8:  $('body').everyTime('1s',function(){
9:   //do something...
10:  });
11:
12:  //每1秒执行，并命名计时器名称为A
13:  $('body').everyTime('1s','A',function(){
14:   //do something...
15:  });
16:
17:  //每20秒执行，最多5次，并命名计时器名称为B
18:  $('body').everyTime('2das','B',function(){
19:   //do something...
20:  },5);
21:
22:  //每20秒执行，无限次，并命名计时器名称为C
23:  //若时间间隔抵到，但函式程序仍未完成则需等待执行函式完成后再继续计时
24:  $('body').everyTime('2das','C',function(){
25:      //执行一个会超过20秒以上的程式
26:  },0,true);
27:
28:  /***********************************************************
29:   *   oneTime(时间间隔, [计时器名称], 呼叫的函式)
30:   ***********************************************************/
31:  //倒数10秒后执行
32:  $('body').oneTime('1das',function(){
33:   //do something...
34:  });
35:
36:  //倒数100秒后执行，并命名计时器名称为D
37:  $('body').oneTime('1hs','D',function(){
38:   //do something...
39:  });
40:
41:  /************************************************************
42:   *  stopTime ([计时器名称], [函式名称])
43:   ************************************************************/
44:  //停止所有的在$('body')上计时器
45:  $('body').stopTime ();
46:
47:  //停止$('body')上名称为A的计时器
48:  $('body').stopTime ('A');
49:
50:  //停止$('body')上所有呼叫test()的计时器
51:  $('body').stopTime (test);