Несколько таймеров обратного отсчета, сгенерированные шаблонными литералами [closed]

Question

В настоящее время я работаю над проектом, для которого требуется несколько таймеров на одной странице. Все они печатают одинаковое количество оставшегося времени, несмотря на разницу между временем окончания каждого таймера. Есть ли кто-нибудь, кто может изменить этот код или предложить решение, чтобы оно работало идеально.

const posts = [{
    title: 'Countdown 1',
    endTime: 'oct 12 2021 22:10:59 GMT+0200'
  },
  {
    title: 'Countdown 2',
    endTime: 'sep 30 2021 13:59:59 GMT+0200'
  },
  {
    title: 'Countdown 3',
    endTime: 'sep 25 2021 16:59:59 GMT+0200'
  }
];

// *********  the Timer function:  *********
function getRemainingTime(endTime) {
  const total = Date.parse(endTime) - Date.parse(new Date());
  const seconds = Math.floor((total / 1000) % 60);
  const minutes = Math.floor((total / 1000 / 60) % 60);
  const hours = Math.floor((total / (1000 * 60 * 60)) % 24);
  const days = Math.floor(total / (1000 * 60 * 60 * 24));

  return {
    total,
    days,
    hours,
    minutes,
    seconds
  };
}

function initializeClock(endTime) {
  function updateClock() {
    const sections = document.querySelectorAll('section');
    const t = getRemainingTime(endTime);

    for (let i = 0; i < sections.length; i++) {
      const daysSpan = document.getElementsByClassName('di');
      const hoursSpan = document.getElementsByClassName('ho');
      const minutesSpan = document.getElementsByClassName('mi');
      const secondsSpan = document.getElementsByClassName('se');

      daysSpan[i].innerHTML = ('0' + t.days).slice(-2) + ' DAY(S)';
      hoursSpan[i].innerHTML = ('0' + t.hours).slice(-2) + ' HR(S)';
      minutesSpan[i].innerHTML = ('0' + t.minutes).slice(-2) + ' MIN(S)';
      secondsSpan[i].innerHTML = ('0' + t.seconds).slice(-2) + ' SEC(S)';
    }

    if (t.total <= 0) {
      clearInterval(timeinterval);
      document.getElementById('counter').innerHTML = "The countdown is over!"
    }
  }
  updateClock();
  const timeinterval = setInterval(updateClock, 1000);
}

// *********  the end of the Timer function:  *********    

// *********  the view function using javascript template literals:  ********* 
function postsItem(post) {

  return `<section>
            <h2 class="article-ttitle">${post.title}</h2>
            <article>
                <div id="counter" onload="${initializeClock(post.endTime)}">
                    <span class="di"></span>
                    <span class="ho"></span>
                    <span class="mi"></span>
                    <span class="se"></span>
                <div>
            </article>
        </section>`
}

document.getElementById('posts').innerHTML = `${posts.map(postsItem).join('')}`

<body>
    <div id="posts"></div>

    <script type="text/javascript" src="https://codereview.stackexchange.com/questions/267868/app.js"></script>
</body>

0

Похожие записи:

Добавить комментарий Отменить ответ