DIV CSS 佈局教程網

先去官網下載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