如何在每天午夜而不是通过用户事件更改班级的背景颜色

Question

目前我有一段代码每 24 小时更改一次类的背景颜色。然而，如果用户刷新页面，24 小时周期会从头开始 – 因此，只有在页面上停留 24 小时而不刷新，他们才会看到颜色变化。

相反我希望背景颜色在午夜每 24 小时更改一次，无论用户事件如何。

这是我的代码：

<script>

const bgColor = ["#DA6F33", "#33B2dA", "#66BD9E", "#667FBD"];
const backgroundSection = document.querySelector(".twofirst");
let i = 0;

function changeColor() {
  backgroundSection.style.backgroundColor = bgColor[i];
  i = (i + 1) % bgColor.length;
};

setInterval(changeColor, 86400000);

</script>

Answer 1

在页面加载时触发间隔看起来不是一个好的解决方案，我在这里看到两种选择：

• 在后端计算背景颜色并将其包含在所有服务器响应中
• 根据系统日期生成索引

我将根据第二个选项提出一个解决方案。 首先，我们来计算一下从年初算起有多少天：

const start = new Date(date.getFullYear(), 0, 0);
const diff = date - start;
const oneDay = 1000 * 60 * 60 * 24;
const dayOfYear = Math.floor(diff / oneDay);

然后我们可以仅使用模运算符（％）来计算索引：

const todayIndex = dayOfYear % 4;

如果你愿意，你可以像这样缩短函数：

const TodayIndex = (Date.now() - new Date(new Date().getFullYear(), 0, 0)) / 86400000 % 4 | 0

然后每分钟触发一个间隔来检查日期是否更改：

const bgColor = ["#DA6F33", "#33B2dA", "#66BD9E", "#667FBD"];
setInterval(() => {
      const todayIndex = (Date.now() - new Date(new Date().getFullYear(), 0, 0)) / 86400000 % 4 | 0;
      const todayBgColor = bgColor[todayIndex];
      // Apply the bg color
     
}, 60 * 1000);