jquery.timer.js的使用

   http://blog.sina.com.cn/s/blog_860353750100wjgr.html  http://blog.youkuaiyun.com/dongxinxi/article/details/6307392

jQuery Timer是一款实用且功能强大的jquery插件，可以控制文档元素的显示方式，丰富的参数设置可以控制显示的更多细节，是一款优秀的定时器插件，使用非常方便，可支持目前几乎所有定时业务的需求。目前版本为1.2。下面就看看如何使用它吧 O(∩_∩)O~

 

• 使用示例

<!-- 引用相关JS库  -->

<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>

<script type="text/javascript" src="js/jquery.timer-.1.2.js"></script>

 

<script type="text/javascript">

    // 网页加载完毕后，初始化timer插件

    $(function() {

       var opts = {

           min_unit: 'second',

           isDate: true,

           isRound: false,

           split_sign: ':'

       };

       $("#tiemrId").timer("2011-12-19 18:00", opts);        

    });

</script>

 

<!-- 页面元素 -->

<div id="tiemrId"></div>

• 参数说明

 

参数名	类型	默认值	说明
max_unit	string	null	最大定时单位，如天(dd)、小时(hh)
min_unit	string	'second'	最小定时单位，如秒(ss)、毫秒(ms)
split_sign	string	':'	定义各显示数字间的分隔符
split_sign_array	Array	null	定义各个显示数字的单位名称
default_sign	string	'-'	计时基数无效或过期时，显示的默认字符
isComplex	boolean	true	是否增强显示(即split_sign_array是否启用)
isRound	boolean	false	各个计时数字是否对精度敏感；若是，则采用四舍五入方式计算数值
isDate	boolean	true	倒计时基参数是否为Date类型
number_style	string	null	各个显示数字的style属性
number_ref_style	string	null	各个显示数字的class属性
container_style	string	null	控件容器的style属性
container_ref_style	string	null	控件容器的class属性
callback	function	function(){}	回调函数：当定时器结束时，调用的函数

注：最大/小定时单位的可选值为：day、hour、minute、second、millsecond（或使用简写形式：dd、hh、mi、ss、ms）

 JQuery Timers提供了三个函式

1. everyTime(时间间隔, [定时器名称], 函式名称, [次数限制], [等待函式程序完成])
2. oneTime(时间间隔, [定时器名称], 呼叫的函式)
3. stopTime ([定时器名称], [函式名称])

官方虽然有Demo，但是却没有列出使用的原始码，即便右键检视原始码，里面也没有完整针对每一种情况写出一组程序说明，所以我只好试着测试函式了。以下为测试程序报告：

[javascript]  view plain copy

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