具有动态日期和标题的倒数计时器

Question

我找到了一个倒数计时器，它有一系列的事件即将发生，并且可以自动更新显示下一个事件

我想做的是向其中添加一个字符串，这样我就可以更新事件的标题和计时器

例如

比赛标题“倒数计时器”

我想到了两种方法来解决这个问题，但缺乏如何实施的知识

将字符串添加到数组中并根据显示的数组部分以某种方式调用它
制作一个包含不同标题的 switch 语句，并根据其使用的数组编号调用它

如果有人能提供帮助，将不胜感激

Javascript 和 HTML:

      const schedule = [
      ['Feb 25 2021', 'Feb 9 2021', "race 1"],
      ['Feb 9 2021', 'Apr 20 2021', "race 2"],
      ['Apr 20 2022', 'Jul 25 2023', "race 3"]
      ];


      function getTimeRemaining(endtime) {
      const total = Date.parse(endtime) - Date.parse(new Date());
      const seconds = Math.floor((total / 1000) % 60);
      const minutes = Math.floor((total / 1000 / 60) % 60);
      const hours = Math.floor((total / (1000 * 60 * 60)) % 24);
      const days = Math.floor(total / (1000 * 60 * 60 * 24));

      return {
      total,
      days,
      hours,
      minutes,
      seconds
      };
      }

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

      function updateClock() {
      const 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();
      const timeinterval = setInterval(updateClock, 1000);
      }

      // 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);

      }
      }

      schedule.forEach(([startDate, endDate]) => {
      // put dates in milliseconds for easy comparisons
      const startMs = Date.parse(startDate);
      const endMs = Date.parse(endDate);
      const currentMs = Date.parse(new Date());

      // if current date is between start and end dates, display clock
      if (endMs > currentMs && currentMs >= startMs ) {
      initializeClock('clockdiv', endDate);
      }
      });

      var race = i;

      switch (race) {
      case 1:
      race = "race 1"
      break;
      case 2:
        race = "race 2"
      break;
      case 3:
        race = "race 3"
      break;
      default:
        race = "end of season"
      }

      document.querySelector('.nextRace').innerHTML = race;

<div>
  Next Race<br>
  <span class="nextRace"></span>
</div>

<div id="clockdiv">

  <span class="race title"></span> Days: <span class="days"></span><br> Hours: <span class="hours"></span><br> Minutes: <span class="minutes"></span><br> Seconds: <span class="seconds"></span>
</div>

Answer 1

一段时间后，我重新思考这个问题，我已经解决了这个问题

我需要做的就是将 switch 语句放在循环变量 i 的语句部分中。这样变量就会在正确的循环中获取而不是日期数组的数量

  // 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);

        var race = i;

        switch (race) {
          case 0:
            track = "race 1"
            break;
          case 1:
            track = "race 2"
            break;
          case 2:
            track = "race 3"
            break;
          
          default:
            track = "end of season"
        }

      }

    }

具有动态日期和标题的倒数计时器

Countdown timer with dynamic date and title

html

javascript

date

countdowntimer