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

分享到:

------分隔線----------------------------
? 35选7福利彩票