Question

我找到了一种使用javascript显示多个倒计时的方法。 Having multiple countdown timer events intervals in javascript

我正在努力创造一个更温暖的＆＃34;显示，在网格中。我选择了一个HTML表格。我有一份草稿here

我无法在表格单元格中显示倒计时，并且具有分开的时间组件。我只是在＆＃34; Days＆＃34;中获得了整个SPAN标记。列。

Answer 1

我会采取不同的方法。首先，我不是在HTML中创建表，而是将有关倒计时器的数据存储在JavaScript代码中的对象数组中，并使用JS生成表。这样做会使其更易于维护，添加新项目只需向数组中添加干净且可读性更强的对象，而不是使用HTML。

其次，我不是为每个计时器启动一个间隔，而是创建一个更新所有计时器的间隔。

这也会重新计算每次更新时剩余的时间。如果你计算一次，然后只是减去每一轮，它可能会引入你的计数器漂移。这是因为setInterval仅保证等待至少与您在delay参数it could be more中指定的毫秒数相同。除非您的计时器持续运行很长时间，否则可能没那么重要，但随着时间的推移它会变得不准确。

// 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: 'ASTRONOMY',
    counters: [
      // Each counter has a .title and a .date that is parsed by new Date()
      {
        title: 'Total Solar Eclipse - (NE US)',
        date: 'August 21, 2017'
      },
      {
        title: 'Next Supermoon - Full',
        date: 'December 3, 2017'
      }
    ]
  },
  {
    title: 'POLITICS',
    counters: [
      {
        title: 'Next Presidential Election',
        date: 'November 3, 2020'
      }
    ]
  },
  {
    title: 'TEST',
    counters: [
      {
        title: '30 seconds from page load',
        date: (new Date()).getTime() + (30 * 1000)
      },
      {
        title: 'Unix Epoch',
        date: 'January 1, 1970'
      }
    ]
  }
];

// 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,
      setText = (selector, text) => node.querySelector(selector).textContent = text;

    if (remaining > 0) {
      setText('.days', Math.floor(remaining / msDay));
      remaining %= msDay;
      setText('.hours', Math.floor(remaining / msHour));
      remaining %= msHour;
      setText('.minutes', Math.floor(remaining / msMinute));
      remaining %= msMinute;
      setText('.seconds', Math.floor(remaining / msSecond));
    } else {
      // make sure we don't accidentally display negative numbers if a timer
      // firing late returns a past timestamp (or the data contains a past date)
      setText('.days', 0);
      setText('.hours', 0);
      setText('.minutes', 0);
      setText('.seconds', 0);
      // This countdown has reached 0 seconds, stop updating it.
      counters.splice(counterIndex, 1);
      // no more counters? Stop the timer
      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;
}

<noscript id="countdown">Sorry, you need JavaScript enabled to view the count
  downs</noscript>

Answer 2

如果您可以使用任何JavaScript库，为什么不检查FlipClock.js。

根据其网站上提供的文字，以下是创建API时考虑的逻辑要求。

用作时钟
用作计时器
用作倒计时
使用纯CSS主题
清洁＆amp;干语法
将所有内容抽象为可重用对象
全功能开发人员API，用于创建自定义“钟面”

如果您不能使用任何库，那么您可以从中学习如何使用javascript创建倒数计时器

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_countdown

显示多个JavaScript倒计时

2 个答案: