6g下载网
当前位置: 主页 > 软件教程 > 编程开发 >

jQuery实现全局计时器的方法

时间: 2017-06-30 15:18 来源: 6g下载网

分享到:

今天小编整理一篇jQuery实现全局计时器的方法的文章和大家分享,希望能给大家提供帮助。

1、实现思路

遍历所有待计时元素,添加一个setInterval计时函数,每隔X秒执行更新计时操作(中间可能还有格式化时间操作)。

2、代码实现

JQ元素通过arr[i]取值时会转变成DOM元素,dom元素和JQ之间转换用 $(arr[i])。

获取所有待计时元素

  1. var arrList =$(".stime");  
  2. setInterval(function(){  
  3.     //遍历数组  
  4.     for(var i = 0,l = arrList.length; i<l ;i++ ){  
  5.         var elem = arrList[i];  
  6.         //格式化时间插入HTML文档  
  7.         $(elem).html(DateDiff( new Date(), new Date($(elem).attr("time") ), elem ));  
  8.     }  
  9. },1000); 

计算时间函数,可倒可正。

如果是Java后台传过来的时间,注意下时间格式,这里已经做了处理;

  1. /*DateDiff 处理*/ 
  2. function DateDiff(t1, t2, elem){  
  3.     //GTM CST 时间相差14小时   
  4.     var diff = t1.setHours(t1.getHours()+14) - Date.parse(t2);  
  5.     //超过一天显示warning色  
  6.     if(diff>(1000*60*60*24)){  
  7.         $(elem).css({color:"rgb(247, 186, 42)"});  
  8.     }  
  9.     return ShowTime(diff);  

显示处理函数,可自行选择精确度。

不需要,注释掉即可。

  1. /*fuc 计时显示处理*/ 
  2. function ShowTime(ms){  
  3.     var obj = {  
  4.         "天" : 1000*60*60*24,  
  5.         "时" : 1000*60*60,  
  6.         "分" : 1000*60  
  7.         /*  
  8.         "秒" : 1000  
  9.         */ 
  10.     };  
  11.     var tmp = ms;  
  12.     var str = "";  
  13.     forvar i in obj ){  
  14.         //向下取整 1.5天 => 1天  
  15.         s = Math.floor( tmp / obj[i] );  
  16.         tmp = tmp % obj[i];  
  17.         str += s+i;  
  18.     }  
  19.     return str;  

jQuery实现全局计时器的方法的文章和大家分享结束,感谢阅读!

(责任编辑:大卫)
标签:计时器 jQuery

分享到:

------分隔线----------------------------