基于日期时间段显示/隐藏多个Div的实现问题

嗨，我看了你这段根据日期时段控制Div显示隐藏的代码，发现几个关键问题，咱们来一步步修正和优化它，让它更靠谱也更好维护～

首先说你当前代码里的问题： #

1. 错误的比较表达式写法
   JavaScript里不支持像current.getTime() > start.getTime() > expiry.getTime()这种链式比较，这种写法的逻辑结果会和你预期的完全不一样。正确的做法是用逻辑与&&来组合两个条件，比如判断当前时间是否在起始和过期时间之间，应该写成current >= start && current <= expiry。

2. 逻辑判断搞反了
   你原本的条件里，想表达“在时段内就显示，否则隐藏”，但当前的if/else分支逻辑是错的，导致实际效果会不符合预期。

3. 性能问题：定时器间隔过短
   你设置了setInterval(function(){...}, 0)，这会让浏览器疯狂执行这个函数（几乎每一帧都跑），会无端占用大量资源。其实完全没必要这么频繁检查，设置成每秒检查一次（1000毫秒）就足够了。

4. 重复代码冗余
   两个定时器里的逻辑几乎一模一样，只是Div选择器和日期不同，重复写两遍不仅麻烦，以后要改逻辑的话还要改两处，很容易出错。

下面是优化后的代码： #

我们可以把控制Div显示隐藏的逻辑封装成一个通用函数，这样不管你要加多少个Div，都只需要调用这个函数就行，代码更简洁也更好维护。

优化后的JavaScript代码：

// 封装通用的时段控制函数
function toggleDivByTime(selector, startDateStr, expiryDateStr) {
  const current = new Date();
  const start = new Date(startDateStr);
  const expiry = new Date(expiryDateStr);
  
  // 判断当前时间是否在时段内
  if (current >= start && current <= expiry) {
    $(selector).show();
  } else {
    $(selector).hide();
  }
}

// 每秒检查一次所有Div的显示状态
setInterval(() => {
  // 控制第一个Div
  toggleDivByTime('.divcontainerone', 'February 03, 2025 09:00:00', 'February 03, 2025 21:00:00');
  // 控制第二个Div
  toggleDivByTime('.divcontainertwo', 'February 13, 2025 09:00:00', 'February 13, 2025 21:00:00');
  // 以后要加更多Div，直接在这里加一行调用就行
}, 1000);

// 页面加载时先执行一次，避免初始状态等待
toggleDivByTime('.divcontainerone', 'February 03, 2025 09:00:00', 'February 03, 2025 21:00:00');
toggleDivByTime('.divcontainertwo', 'February 13, 2025 09:00:00', 'February 13, 2025 21:00:00');

对应的HTML（和你原来的一致，无需额外修改）：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="divcontainerone" style="display:none">
  <p>content for div #one</p>
</div>

<div class="divcontainertwo" style="display:none">
  <p>content for div #two</p>
</div>

代码解释： #

• 通用函数toggleDivByTime：接收三个参数——Div的选择器、开始时间字符串、结束时间字符串，内部统一处理时间比较和显示隐藏逻辑，彻底避免重复代码。
• 合理的定时器间隔：设置为1000毫秒（1秒），既保证时间到了能及时切换状态，又不会浪费浏览器资源。
• 页面加载时先执行一次：避免页面刚加载时，用户要等1秒才看到正确的状态，提升初始体验。
• 清晰的条件判断：直接用current >= start && current <= expiry判断当前时间是否在目标时段内，逻辑直白且完全符合需求。

这样修改后，你的代码不仅能正确实现需求，以后要加更多Div的话，只需要在定时器里多调用一次toggleDivByTime并传入对应的参数就行，维护起来超方便～

备注：内容来源于stack exchange，提问作者Timothy