每 48 小时在三个 classList 之间切换

Question

我希望全年建立一个持续的计时器。我希望每 48 小时激活一次 span 的 ID。

我有一个 24 小时的时间表来更改字母。代码在当前时间循环，并根据我的 else 进行检查，以切换哪个字母的样式应为 .active。

如何将此计时器修改为 48 小时长并显示字母 A 48 小时然后切换到 B 并停留 48 小时然后切换到 C 48 小时然后返回到 A？感谢您的任何建议！

忘了说这会从早上 8 点开始，一直持续到早上 8 点，持续 48 小时。

const today = new Date();
const hourNow = today.getHours()
const letterA = document.querySelector('#A');
const letterB = document.querySelector('#B');
const letterC = document.querySelector('#C');
const allLetters = document.querySelectorAll("span");

if (hourNow > 18) {
  letterA.classList.toggle('active');
} else if (hourNow > 12) {
  letterB.classList.toggle('active');
} else if (hourNow > 0) {
  letterC.classList.toggle('active');
} else {
  allLetters.forEach(letter => {
    letter.removeAttribute('class');
  })
}

Answer 1

这是使用倒计时到未来日期的一种方法：

const today = new Date();
const now = today.getTime();
const letterA = document.querySelector('#A');
const letterB = document.querySelector('#B');
const letterC = document.querySelector('#C');

// Set countdown til 8am at the end of the year 9999 (or whenever)
const countDownDate = new Date("December 31, " + 9999 + " 07:00:00").getTime();

// Find the distance between now an the countdown date
const timeLeft = countDownDate - now;

// Time calculation for days left
const daysLeft = Math.floor(timeLeft / (1000 * 60 * 60 * 24));

// A, B, C
const numberOfSpans = 3;

// if we wanted to change every day, we'd need:
// (daysLeft % numberOfSpans)

// since we want to change every 2 days, we'll need:
const daysLeftOver = (daysLeft % (numberOfSpans * 2));

// remove all active classes
if (letterA.classList.contains("active")) {
  letterA.classList.remove("active");
}
if (letterB.classList.contains("active")) {
  letterB.classList.remove("active");
}
if (letterC.classList.contains("active")) {
  letterC.classList.remove("active");
}

// Add active class to whichever box

// 0,1
if (daysLeftOver == 0 || daysLeftOver == 1) {
  letterA.classList.toggle('active');
  // 2,3
} else if (daysLeftOver == 2 || daysLeftOver == 3) {
  letterB.classList.toggle('active');
  // 4,5
} else if (daysLeftOver == 4 || daysLeftOver == 5) {
  letterC.classList.toggle('active');
}

span {
  background-color: white;
  position: relative;
  display: inline-block;
  height: 50px;
  width: 50px;
  border: 2px solid #f5f5f5;
}

.active {
  background-color: yellow;
}

<span id="A">A</span>
<span id="B">B</span>
<span id="C">C</span>