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';
		 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;
	 var now = new Date();
        var distance = end - now;
		
		
 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);
		  if (distance < 0) {
		$(this).html("Expired");
	
		}
		else{
        countdown($(this), days, hours, minutes, seconds);
		}
    });
    
    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>

使用带有setinterval的javascript在一个页面中使用多个倒数计时器

1 个答案: