Многократный обратный отсчет на одной странице - PullRequest
Новая
       8

Многократный обратный отсчет на одной странице

1 голос
/ 09 ноября 2019

Мне нужна помощь с кодом JavaScript, я пытаюсь получить код, который будет работать для нескольких таймеров обратного отсчета на той же странице. Я попробовал код ниже, но безуспешно. 

    <div class="expirydiv">Jan 02,2019</div>
    <div class="expirydiv">jun 15,2019</div>

    <script>
// Set the date we're counting down to

          var ps = document.querySelectorAll("div.expirydiv");

          var countDownDate = new Date(ps).getTime();

// Update the count down every 1 second

          var x = setInterval(function() {

// Get today's 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));

          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);



// Output the result in an element with classname="expirydiv"

    for(var i=0; i<ps.length; i++){
      ps[i].innerHTML = days + "d " + hours + "h "
      + minutes + "m " + seconds + "s ";

// If the count down is over, write some text

      if (distance < 0) {
        clearInterval(x);
        ps[i].innerHTML = "EXPIRED";
      }
      }
    }, 1000);

    </script>

Результат кода выше выглядит следующим образом: 

    NaNd NaNh NaNm NaNs
    NaNd NaNh NaNm NaNs

Что не так с этим кодом, я думаю, что селектор запросовне удается выбрать div.expirydiv в качестве даты.

Ответы [ 2 ]

0 голосов
/ 09 ноября 2019

Вы используете несколько отсчетов, поэтому вам нужно перебрать их и установить таймер. 

var ps = document.querySelectorAll("div.expirydiv");
ps.forEach(function(timer){
    var countDownDate = new Date(timer.innerText).getTime();

    var x = setInterval(function() {

        var now = new Date().getTime();
        var distance = countDownDate - now;
        var days = Math.floor(distance / (1000 * 60 * 60 * 24));

        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);    

            timer.innerHTML = days + "d " + hours + "h "
            + minutes + "m " + seconds + "s ";
            if (distance < 0) {
                clearInterval(x);
                timer.innerHTML = "EXPIRED";
              }

    }, 1000);    
});
<div class="expirydiv">Dec 02,2019</div>
<div class="expirydiv">Dec 15,2019</div>
0 голосов
/ 09 ноября 2019

Изменить var countDownDate = new Date(ps).getTime(); на var countDownDate = new Date(ps[0].innerHTML).getTime();

...