Таймер еженедельного и ежедневного отсчета JavaScript для нескольких событий для таблицы запланированных событий

Это мой код ниже:

// data is an array of objects, each reresenting one of your categories.
// Each category has a .title to store its title and a .counters that
// stores an object for each counter in that category.
var data = [
  {
    title: 'Game Events',
    counters: [
      // Each counter has a .title and a .date that is parsed by new Date()
      {
        title: 'Daily Premium Event',
        date: 'December 20, 2018'
      },
      {
        title: '3 times a day Premium Event',
        date: 'December 20, 2018'
      },
      {
        title: 'Twice a week Premium Event',
        date: 'December 20, 2018'
      },
      {
        title: 'Weekly Normal Event',
        date: 'December 20, 2018'
      }
    ]
  }
];

// this reduce generates the table
let table = data.reduce((acc, category, categoryIndex) => {
  return acc + `<tr><td colspan="6" class="category">${category.title}</td></tr>` +
    category.counters.reduce((acc, counter, index) => {
      return acc + `<tr id="counter-${categoryIndex}-${index}">
           <td>${counter.title}</td>
           <td>${counter.date}</td>
           <td class="days"></td>
           <td class="hours"></td>
           <td class="minutes"></td>
           <td class="seconds"></td>
       </tr>`;
      }, '');
}, '<table class="countdown"><tr><th>Event</th><th>Date</th><th>Days</th><th>Hours</th><th>Minutes</th><th>Seconds</th></tr>');

table += '</table>';

// insert the table after the noscript tag
document.getElementById('countdown').insertAdjacentHTML('afterend', table);

// generate our list of counters
let counters = data.reduce((acc, category, categoryIndex) => {
  return acc.concat(category.counters.reduce((counterAcc, counter, index) => {
    return counterAcc.concat([{
      // counters will be an array of the objects we generate here
      // node contains a reference to the tr element for this counter
      node: document.getElementById(`counter-${categoryIndex}-${index}`),
      // date is the date for this counter parsed by Date and then converted
      // into a Unix timestamp
      date: (new Date(counter.date)).getTime()
    }]);
  }, []));
}, []);

const msSecond = 1000,
  msMinute = msSecond * 60,
  msHour = msMinute * 60
  msDay = msHour * 24;


let intervalId;
function updateCounters () {
  counters.forEach((counter, counterIndex) => {
    let remaining = counter.date - Date.now(),
      node = counter.node;

    if (remaining >= 0) {
      node.querySelector('.days').textContent = Math.floor(remaining / msDay);
      remaining %= msDay;
      node.querySelector('.hours').textContent = Math.floor(remaining / msHour);
      remaining %= msHour;
      node.querySelector('.minutes').textContent = Math.floor(remaining / msMinute);
      remaining %= msMinute;
      node.querySelector('.seconds').textContent = Math.floor(remaining / msSecond);
    } else {
      // This countdown has reached 0 seconds, stop tracking it.
      counters.splice(counterIndex, 1);
      // no more counters? Stop interval
      if (counters.length === 0) {
        clearInterval(intervalId);
      }
    }
  });
}

// display counters right away without waiting a second
updateCounters();
intervalId = setInterval(updateCounters, 1000);
table {   border-collapse: collapse; }

tr:nth-child(even) {   background-color: #edf; }

.category {   font-weight: bold; }

td, th {   padding: .5em; } .days, .hours, .minutes, .seconds {   text-align: right; }

Приведенный выше код работает, когда для события указана конкретная дата. Тем не менее, я изо всех сил, чтобы редактировать код для правильной работы с Daily Premium Event который запускается один раз в день, а не в определенную дату, и после его окончания он должен быть перезапущен на следующий день. 3 times a day Premium Event который запускается 3 раза в день, каждый день, а не в определенную дату, поэтому после его окончания он должен перезапускаться на второй час в течение дня и т. д. до 3 раз, например 1-е: 13:00, 2-е: 20:00 и 3-е: 22:00, Twice a week Premium Event событие, которое снова проводится два раза в неделю, например, в понедельник и пятницу в определенный час, каждую неделю, Weekly Normal Event который проводится раз в неделю в воскресенье в определенный час.

Итак, есть ли простой способ сделать это или предложить плагин, который будет работать с минимальным редактированием, насколько это возможно, так как я плохо разбираюсь в JavaScript? Заранее спасибо!

0 ответов

Другие вопросы по тегам