試圖讓多個定時器在單個頁面上工作

Question

我有一個單獨的頁面，我需要一個定時器來一次又一次地顯示，因爲用戶會繼續向下閱讀頁面。

這是同一個計時器，它只是倒計時一段時間。

我已經在第一個內容範圍內完美地運行了計時器，但它不會顯示在我指定的所有其他元素中。

下面的代碼是什麼樣子從.js文件中：

document.getElementById('minutes').innerHTML = padNums(minutes, 2); 
document.getElementById('seconds').innerHTML = padNums(seconds, 2); 
document.getElementById('milliseconds').innerHTML = padNums(milliseconds, 3); 

從HTML文件中的腳本：

$('.counter').html('<span id="minutes">0</span>' + ':' + '<span id="seconds">0</span>' + ':' + '<span id="milliseconds">0</span>'); 

和HTML：

<div class="wrapper"> 
    <p> There is this much time left: <span class="counter"> </span> </p> 
    <p> There is this much time left: <span class="counter"> </span> </p> 
    <p> There is this much time left: <span class="counter"> </span> </p> 
    </div> 

..........

我試過將.js方法更改爲getElementsByClass，並將跨度更改爲類而不是id。甚至停止了第一次倒計時工作。

我還能試試嗎？

感謝

---

這裏是另一套代碼從以下建議我嘗試過：

裏面的html頁面：

<div class="wrapper"> 
    <p> There is this much time left: <span class="counter"> </span> </p> 
    <p> There is this much time left: <span class="counter"> </span> </p> 
    <p> There is this much time left: <span class="counter"> </span> </p> 
    </div> 

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
    <script type="text/javascript"> 

    $('.counter').html('<span class="minutes">0</span>' + ':' + '<span  
    class="seconds">0</span>' + ':' + '<span class="milliseconds">0</span>'); 


    </script>  

而且.js文件中：

$('.minutes').innerHTML = padNums(minutes, 2); 
$('.seconds').innerHTML = padNums(seconds, 2); 
$('.milliseconds').innerHTML = padNums(milliseconds, 3); 

Alth ough ...這也行不通。

---

對我來說，做到這一點是創建多套爲每個定時器唯一的ID，但我想這樣做的更優雅的方式最簡單的方法。

Answer 1

嘗試使用跨度分鐘＃分鐘，＃秒和#milliseconds而不是ID。

這樣您就可以更換三

document.getElementById('minutes') ... 

與

$('.minutes') ... 

---

只看見自己的編輯。

你需要在你

$('.counter').html('...') 

Answer 2

爲PHP做了同樣的方式，我做這個類來處理這樣的情況下使用

$('.minutes').html('...') 

：

class IDDateTime { 

    static function SecToTime($sec) { 
     $days = floor($sec/86400); 
      $sec = $sec - ($days * 86400); 
     $hours = floor($sec/3600); 
      $sec = $sec - ($hours * 3600); 
     $minutes = floor($sec/60); 
      $sec = $sec - ($minutes * 60); 
     $seconds = $sec; 

     if($days > 0) $days= $days.' days'; else $days=''; 
     if ($minutes < 10) $minutes= '0'.$minutes; 
     if ($seconds < 10) $seconds= '0'.$seconds; 

     return $days.$hours.':'.$minutes.':'.$seconds; 
    } 

    static function ShowTimer($id,$sec,$href='',$extrasec=false) { 
     return '<span id="'.$id.'">'.IDDateTime::SecToTime($sec).'</span><script type="text/javascript">updateTime("'.$id.'",'.($sec + ($extrasec?1:0)).',"'.$href.'");</script>'; 
    } 

    static function AddTimerEngine($text='Done') { 
     return ' 
     <script type="text/javascript"> 
     function updateTime(elementId,time,rdr) { 
      var bt_obj = document.getElementById(elementId); 
      time--; 
      var timeToEnd = time; 
      temp = timeToEnd; 
      if(temp >= 0) { 
       days = Math.floor(temp/86400); 
       temp = temp % 86400; 
       hours = Math.floor(temp/3600); 
       temp = temp % 3600; minutes = Math.floor(temp/60); 
       temp = temp % 60; output = ""; 
       seconds = temp;     
       if(days > 0) output = days + "days. "; 
       if(seconds < 10) seconds = "0" + seconds; 
       if(minutes < 10) minutes = "0" + minutes; 
       bt_obj.innerHTML = "<b>"+output+hours+":"+minutes+":"+seconds+"</b>"; 
       var jsExp = "updateTime(\'" + elementId + "\'," + time +",\'"+ rdr + "\')"; 
       setTimeout(jsExp , 1000); 
      } else { 
       bt_obj.innerHTML = "'.$text.'"; 
       if(rdr != \'\') { 
        window.location.href = rdr; 
       } 
      } 
     }; 
     </script>'; 
    } 

} 

要使用它只需將它添加到您的網頁中即可：

Echo IDDateTime::ShowTimer('yout_timer_id',$seconds); 
Echo IDDateTime::ShowTimer('another_timer',$seconds); 

您可以採取代碼的某些部分並適應您的情況，或按原樣使用它。