用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：

        $(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);
});

        });

    上面的代码关键的地方是我们用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   http://wintersun.cnblogs.com