Таймер обратного отсчета с несколькими повторяющимися событиями каждую неделю - PullRequest
0 голосов
/ 24 марта 2020

Я адаптирую учебник по коду из здесь , чтобы создать таймер обратного отсчета с несколькими повторяющимися событиями. Это хорошая отправная точка, но мне нужно ее изменить, чтобы сделать следующее: 1. Проведите четыре мероприятия, которые повторяются каждую неделю. 2. Каждое событие имеет уникальный день недели и время. 3. Часовой пояс должен отражать стандартное время Pacifi c. 4. Когда обратный отсчет достигает нуля, таймер начинает обратный отсчет до следующего события недели.

Я довольно новичок в javascript.

Вот вилка, из которой я сделал учебник, на который я ссылался выше:

function getTimeRemaining(endtime) {
  var t = Date.parse(endtime) - Date.parse(new Date());
  var seconds = Math.floor((t / 1000) % 60);
  var minutes = Math.floor((t / 1000 / 60) % 60);
  var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
  var days = Math.floor(t / (1000 * 60 * 60 * 24));
  return {
    'total': t,
    'days': days,
    'hours': hours,
    'minutes': minutes,
    'seconds': seconds
  };
}

function initializeClock(id, endtime) {
  var clock = document.getElementById(id);
  clock.style.display = 'block';
  var daysSpan = clock.querySelector('.days');
  var hoursSpan = clock.querySelector('.hours');
  var minutesSpan = clock.querySelector('.minutes');
  var secondsSpan = clock.querySelector('.seconds');

  function updateClock() {
    var t = getTimeRemaining(endtime);

    daysSpan.innerHTML = t.days;
    hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
    minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
    secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

    if (t.total <= 0) {
      clearInterval(timeinterval);
    }
  }

  updateClock();
  var timeinterval = setInterval(updateClock, 1000);
}

var schedule = [
    ['Jul 25 2015', 'Sept 20 2020'],
    ['Sept 21 2015', 'Jul 25 2020'],
    ['Jul 25 2016', 'Jul 25 2019']
];

// iterate over each element in the schedule
for(var i=0; i<schedule.length; i++){
  var startDate = schedule[i][0];
  var endDate = schedule[i][1];

  // put dates in milliseconds for easy comparisons
  var startMs = Date.parse(startDate);
  var endMs = Date.parse(endDate);
  var currentMs = Date.parse(new Date());

  // if current date is between start and end dates, display clock
  if(endMs > currentMs && currentMs >= startMs ){
      initializeClock('clockdiv', endDate);
  }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...