在设置间隔使用javascript的onepage中实现多个倒计时器

Question

我一次只显示一个帖子的倒计时器。 如何显示来自while循环的所有帖子的多个倒计时定时器。 每个帖子有一个日期如此

var end = new Date('10/19/2014 10:1 AM'); 
 

 
    var _second = 1000; 
 
    var _minute = _second * 60; 
 
    var _hour = _minute * 60; 
 
    var _day = _hour * 24; 
 
    var timer; 
 

 
    function showRemaining() { 
 
     var now = new Date(); 
 
     var distance = end - now; 
 
     if (distance < 0) { 
 

 
      clearInterval(timer); 
 
      document.getElementById('countdown').innerHTML = 'EXPIRED!'; 
 

 
      return; 
 
     } 
 
     var days = Math.floor(distance/_day); 
 
     var hours = Math.floor((distance % _day)/_hour); 
 
     var minutes = Math.floor((distance % _hour)/_minute); 
 
     var seconds = Math.floor((distance % _minute)/_second); 
 

 
     // document.getElementById('days').innerHTML = days + 'days '; 
 
     // document.getElementById('hours').innerHTML += hours + 'hrs '; 
 
     // document.getElementById('min').innerHTML += minutes + 'mins '; 
 
     //document.getElementById('countdown').innerHTML += seconds + 'secs'; 
 
\t \t document.getElementById('days').innerHTML = days ; 
 
     document.getElementById('hours').innerHTML = hours; 
 
     document.getElementById('min').innerHTML = minutes; 
 
    } 
 

 
    timer = setInterval(showRemaining, 1000);

<span id="days"></span><span class="body_txt6">Days</span> <span id="hours"></span><span class="body_txt6">h</span> : <span id="min"></span><span class="body_txt6">m</span></p>

通过使用该日期显示倒计时时间。

Answer 1

$(document).ready(function() { 
 
    $(".ghomelistingse1").each(function() { 
 
     var str_enddate = $(this).html(); 
 
    
 
var end = new Date(str_enddate); 
 

 
    var _second = 1000; 
 
    var _minute = _second * 60; 
 
    var _hour = _minute * 60; 
 
    var _day = _hour * 24; 
 
\t var now = new Date(); 
 
     var distance = end - now; 
 
\t \t 
 
\t \t 
 
var days = Math.floor(distance/_day); 
 
     var hours = Math.floor((distance % _day)/_hour); 
 
     var minutes = Math.floor((distance % _hour)/_minute); 
 
     var seconds = Math.floor((distance % _minute)/_second); 
 
\t \t if (distance < 0) { 
 
\t \t $(this).html("Expired"); 
 
\t 
 
\t \t } 
 
\t \t else{ 
 
     countdown($(this), days, hours, minutes, seconds); 
 
\t \t } 
 
    }); 
 
    
 
    function countdown(element, days, hours, minutes, seconds) { 
 
     var interval = setInterval(function() { 
 
      if(seconds == 0) { 
 
       if(minutes == 0) { 
 
        if(hours == 0) { 
 
         if(days == 0) { 
 
          return; 
 
         } 
 
         else { 
 
          days--; 
 
          hours = 23; 
 
          minutes = 59; 
 
          hours = 60; 
 
         } 
 
        } 
 
        else { 
 
         hours--; 
 
         minutes = 59; 
 
         seconds = 60; 
 
        } 
 
       } 
 
       else { 
 
        minutes--; 
 
        seconds = 60; 
 
       } 
 
      } 
 
      seconds--; 
 
      element.html(days + "d " + hours + "h " + minutes + "m " + seconds + "s"); 
 
     }, 1000); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
Month/ Date/Year 
 
Example: 10/25/2014 
 
<br/> 
 
Date: 09/29/2014 <br/> 
 
<span class="ghomelistingse1">09/29/2014</span> 
 
<hr> 
 

 
Date: 11/19/2014 <br/> 
 
<span class="ghomelistingse1">11/19/2014</span> 
 
<hr> 
 
Date: 10/24/2014 <br/> 
 
<span class="ghomelistingse1">10/24/2014</span>