按不同时段切换GIF src的JS代码运行异常问题咨询

• 跨天时间区间判断逻辑错误：hour >=21 && hour <5 永远无法成立，JavaScript 中getHours()返回值是0-23的整数，不存在同时满足≥21且<5的数值，跨天区间需要拆分为hour >=21 || hour <5用或运算符连接
• 初始版本逻辑运算符误用：21:00-21:30的判断错误使用||（或），导致只要分钟落在0-30区间，无论当前小时是多少都会命中该条件，比如22:10就会错误切换为gif3
• 更新版本存在多处赋值错误：21:30-次日5:00分支错误将gif的src赋值为gif2，5:00-7:00分支也错误赋值为gif2，不符合需求规则
• 更新版本区间覆盖遗漏：21:30之后的判断要求同时满足「分钟30-59」和「小时≥21且<5」，后者永远不成立，导致22点之后的时间无法命中正确分支，触发异常切换

<script>
// 封装切换逻辑，方便首次加载和定时调用
function updateAssets() {
  const date = new Date();
  const hour = date.getHours();
  const minutes = date.getMinutes();
  const gifEl = document.getElementById("gif");
  const bgEl = document.querySelector(".viewport-div");

  if (hour >=7 && hour < 18) {
    console.log('当前时段：7:00-18:00');
    gifEl.src = "gif1";
    bgEl.style.backgroundImage = "url(BGgif1)";
  } else if (hour >= 18 && hour < 21) {
    console.log('当前时段：18:00-21:00');
    gifEl.src = "gif2";
    bgEl.style.backgroundImage = "url(BGgif2)";
  } else if (hour === 21 && minutes < 30) {
    console.log('当前时段：21:00-21:30');
    gifEl.src = "gif3";
    bgEl.style.backgroundImage = "url(BGgif3)";
  } else if ((hour === 21 && minutes >=30) || hour > 21 || hour <5) {
    console.log('当前时段：21:30-次日5:00');
    gifEl.src = "gif4";
    bgEl.style.backgroundImage = "url(BGgif4)";
  } else if (hour >=5 && hour <7) {
    console.log('当前时段：5:00-7:00');
    gifEl.src = "gif5";
    bgEl.style.backgroundImage = "url(gif5)";
  }
}

// 页面加载时立即执行一次
updateAssets();

// 可选：每分钟检查一次，实现页面常驻时自动切换
setInterval(updateAssets, 60 * 1000);
</script>

修正后的代码优化了区间判断逻辑，所有时段覆盖完整无冲突，也修正了资源赋值错误。如果需要页面打开状态下到点自动切换，保留最后一行的定时调用即可，不需要的话可以删除。

内容的提问来源于stack exchange，提问作者Jorge Gutierrez Marco