javascript - 在特定日期和时间突出显示下一个

Question

我的 HTML 中有一个无序列表设置。从第一个里开始，每周日上午 7:00，我想突出显示本周的下一个里，然后循环浏览列表，一次突出显示一周的每个里。

我编写了以下 JavaScript 代码，该代码以 1000 毫秒的间隔循环浏览列表项。

$(function() {
    $('ul li:first').addClass('active');

    setInterval(function () {
      var date = new Date();
      if (date.getDay() === 0 && date.getHours() === 7 && date.getMinutes === 0 && date.getSeconds == 0) {
        transition();
      }
    }, 1000);

  });

  function transition() {
      var current = $('.active');
      var next = null;
      if (current.next('li').size() == 0) {
          next = $('ul li:first');
      } else {
          next = current.next('li');
      }
      current.removeClass('active');
      next.addClass('active');
  };

我不知道如何将每个 li 上的循环“暂停”一周。我可以将 1000 毫秒间隔更改为一周内的毫秒数吗？

Answer 1

不知道为什么您很少想设置转换。似乎要编写很多代码，这样如果有人碰巧在七点之前出现在您的页面上，日历就会过渡到下周。

从技术上讲，您的实现应该可以工作，但它必须每秒运行一段代码。如果您构造日期并进行一些日期数学计算，则可以专门设置周日早上 7 点的超时，然后设置一个每周递归调用自身执行此操作的超时。如果您的用户在您的页面上停留超过一个星期日...

$(function() {
      $('ul li:first').addClass('active');

      function queueTransitionForNextWeek() {
        var now = new Date();

        function nextSundayAtSeven(date) {
          var clone = new Date(date.getTime());
          clone.setDate(clone.getDate() - clone.getDay() + 7);
          clone.setHours(7);
          clone.setMinutes(0);
          return clone;
        }
        var msTillNextWeek = nextSundayAtSeven(now) - now;

        setTimeout(function() {
          transition();
          queueTransitionForNextWeek();
        }, msTillNextWeek);
      }

      queueTransitionForNextWeek();

      function transition() {
        var current = $('.active');
        var next = null;
        if (current.next('li').size() == 0) {
          next = $('ul li:first');
        } else {
          next = current.next('li');
        }
        current.removeClass('active');
        next.addClass('active');
      };