Таймер еженедельного и ежедневного отсчета 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? Заранее спасибо!