用JQuery.timer插件实现一个计时器__jquery计时器

相关文章推荐

率性的砖头 · 单层LSTM和多层LSTM的输入与输出_LS ...· 1 年前 ·

鼻子大的生姜 · iOS开发知识笔记--解决Xcode打印在控 ...· 1 年前 ·

帅呆的四季豆 · python ...· 1 年前 ·

谈吐大方的木瓜 · 12个Python数据处理常用内置函数-py ...· 1 年前 ·

腼腆的柑橘 · c++ map遍历删除元素-掘金· 1 年前 ·

先去官网下载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);