Question

这是我的下面的代码：

// 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次，例如1st：13:00，2nd ：20：00和3rd：22:00，Twice a week Premium Event每周两次运行一次，例如，每周的特定时间在星期一和星期五运行一次，Weekly Normal Event每周在星期日运行一次也在特定的时间。

那么，有没有一种简单的方法可以做到这一点，或者建议一个插件，因为我对JavaScript不太满意，所以可以减少编辑工作？预先谢谢你！

JavaScript每周和每天倒数计时器，用于“预定事件”表中的多个事件

0 个答案: