從初始HTML值開始的jQuery倒數（hh：mm：ss）

Question

我目前正在拍賣網站上從一個初始HTML值開始倒計時，在頁面上會出現幾個不同的實例。

該值將只是從PHP解析的文本字符串，格式爲hh：mm：ss。

我發現了大量不同的倒計時腳本，但它們大部分是用於圖形表示的，並且只能在JS/jQ中設置初始值。

<span class="countdown">11:55:12<span> 

我只是在尋找一個簡單的解決方案，如果需要用某些種類的回調倒數到零。我試過很多腳本，但似乎無法在多個元素上獲得基本的文本功能。

任何幫助表示讚賞！

Answer 1

有這樣做的多種方法，但這裏是一個簡單的jQuery函數法...

(function($){ 
    $.fn.extend({  
    startTimer:function(){ 

     // countdown elements  
     var _this = this; 

     // for padding numbers with leading zero 
     Number.prototype.pad=function(){ 
     return (this<10?'0':'')+this; 
     } 

     var computeAndDisplay=function(){ 
     //loop through countdown elements 
     $(_this).each(function(){ 
      // get timestamp from ID attribute 
      var timestamp = parseInt($(this).attr('id').split('_').pop())*1000; 
      var differance = timestamp - new Date().getTime(); 
      var hours = 0; 
      var minutes = 0; 
      var seconds = 0; 
      // if there is a positive difference 
      if(differance > 0){ 
      //hours 
      if(differance >= 3600000){ 
       hours = Math.floor(differance/3600000); 
      } 
      //minutes 
      if(differance >= 60000){ 
       minutes = Math.floor(differance/60000)%60; 
      } 
      //seconds 
      if(differance >= 0){ 
       seconds = Math.floor(differance/1000)%60; 
      } 
      $(this).html(hours.pad()+":"+minutes.pad()+":"+seconds.pad()); 
      }else{ 
      // if there is no positive difference, timer is done and you can 
      // do whatever to that countdown element here 
      } 
     }); 
     }; 
     //start timer 
     setInterval(computeAndDisplay,1000); 
    } 
    }); 
})(jQuery); 

此方法只依賴於通過多循環倒計時，而不是使用一個setInterval函數爲每個倒計時實例分別調用setInterval調用。不過，我們應該在每個html元素的ID中保留我們的初始時間戳值，所以我們可以每次都檢索它。

<div class="countdown" id="cd_1_1332794014"></div> 
<div class="countdown" id="cd_2_1332698014"></div> 
<div class="countdown" id="cd_3_1332699014"></div> 

的ID的最後一位是從PHP Unix時間戳，中間部分是無關的功能，但存在保持的ID是唯一的。

爲了讓計時器開始，你只需要調用...

$(document).ready(function(){ 
    $('.countdown').startTimer(); 
});