Блог

Учитывая этот HTML:

 <span class="countdown-date" data-countdown-date="2020-08-31 18:00:00"></span>

<span class="countdown-date" data-countdown-date="2020-12-31 00:00:00"></span>
  

Я пытаюсь отобразить значение data-countdown-date атрибута в виде текста обратного отсчета в промежутке, используя этот JS:

 document.addEventListener('DOMContentLoaded', function () {
    var list = document.getElementsByClassName('countdown-date');

    for (let item of list) {
        // console.log(item.getAttribute("data-countdown-date"));
        // shows 2020-08-31 18:00:00 and 2020-12-31 00:00:00.

        // Set the date we're counting down to
        var countDownDate = new Date(item.getAttribute("data-countdown-date")).getTime();
        
        // console.log(countDownDate);
        // shows 1598860800000 and 1609333200000

        // Update the count down every 1 second
        var x = setInterval(function () {
            // Get todays date and time
            var now = new Date().getTime();

            // Find the distance between now and the count down date
            var distance = countDownDate - now;

            // Time calculations for days, hours, minutes and seconds
            var days = Math.floor(distance / (1000 * 60 * 60 * 24));
            // console.log(days);

            var hours = Math.floor(
                (distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
            );
            var minutes = Math.floor(
                (distance % (1000 * 60 * 60)) / (1000 * 60)
            );
            var seconds = Math.floor((distance % (1000 * 60)) / 1000);

            // Display the result in the element with id="countdown-date"
            item.innerHTML =
                days   'd '   hours   'h '   minutes   'm '   seconds   's ';

            // If the count down is finished, write some text
            if (distance < 0) {
                clearInterval(x);
                item.innerHTML = 'EXPIRED';
            }
        }, 1000);
    };
});

  

Проблема в том, что обе даты обратного отсчета продолжают показывать одинаковые значения.

Вот так: 136d 1h 56m 26s (начальное значение при загрузке страницы).

Буду признателен за любую помощь.

источник кода JS:https://www.w3schools.com/howto/howto_js_countdown.asp .

countDownDate должно быть объявлено внутри функции interval.

Когда оно объявлено вне переменной, оно перезаписывается.

 document.addEventListener('DOMContentLoaded', function () {
    var list = document.getElementsByClassName('countdown-date');

    for (let item of list) {
        // console.log(item.getAttribute("data-countdown-date"));
        // shows 2020-08-31 18:00:00 and 2020-12-31 00:00:00.


        // console.log(countDownDate);
        // shows 1598860800000 and 1609333200000

        // Update the count down every 1 second
        var x = setInterval(function () {
            // Set the date we're counting down to
            var countDownDate = new Date(item.getAttribute("data-countdown-date")).getTime();

            // Get todays date and time
            var now = new Date().getTime();

            // Find the distance between now and the count down date
            var distance = countDownDate - now;

            // Time calculations for days, hours, minutes and seconds
            var days = Math.floor(distance / (1000 * 60 * 60 * 24));
            // console.log(days);

            var hours = Math.floor(
                (distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
            );
            var minutes = Math.floor(
                (distance % (1000 * 60 * 60)) / (1000 * 60)
            );
            var seconds = Math.floor((distance % (1000 * 60)) / 1000);

            // Display the result in the element with id="countdown-date"
            item.innerHTML =
                days   'd '   hours   'h '   minutes   'm '   seconds   's ';

            // If the count down is finished, write some text
            if (distance < 0) {
                clearInterval(x);
                item.innerHTML = 'EXPIRED';
            }
        }, 1000);
    };
});  

     <span class="countdown-date" data-countdown-date="2020-08-31 18:00:00"></span>
    <span class="countdown-date" data-countdown-date="2020-12-31 00:00:00"></span>  

 document.addEventListener('DOMContentLoaded', function () {
    var list = document.getElementsByClassName('countdown-date');

    function processdate(countDownDate, item) {
        // Get todays date and time
        var now = new Date().getTime();

        // Find the distance between now and the count down date
        var distance = countDownDate - now;

        // Time calculations for days, hours, minutes and seconds
        var days = Math.floor(distance / (1000 * 60 * 60 * 24));
        // console.log(days);

        var hours = Math.floor(
            (distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
        );
        var minutes = Math.floor(
            (distance % (1000 * 60 * 60)) / (1000 * 60)
        );
        var seconds = Math.floor((distance % (1000 * 60)) / 1000);

        // Display the result in the item
        item.innerHTML =
            days   'd '   hours   'h '   minutes   'm '   seconds   's ';

        // If the count down is finished, write some text
        if (distance < 0) {
            clearInterval(x);
            item.innerHTML = 'EXPIRED';
        }
    }

    for (let item of list) {
        // Set the date we're counting down to
        var countDownDate = new Date(item.getAttribute("data-countdown-date")).getTime();

        // Update the count down every 1 second
        var x = setInterval(processdate, 1000, countDownDate, item);
    }
});