JavaScript实现指定日期到达时内容过期功能遇问题求助

我明白你现在的困扰——明明想让指定日期到了才切换内容显示状态，结果两个段落都直接出来了。咱们一步步来排查和修复：

第一步：先理清核心逻辑 #

咱们要实现的目标是：

• 设定一个明确的过期日期
• 对比当前系统日期和过期日期
• 根据对比结果精准控制对应元素的显示/隐藏

第二步：排查常见问题&给出修复方案 #

1. 调整初始样式，避免页面加载闪烁 #

虽然你CSS里设置了display:block，但建议先给需要过期的内容设置默认隐藏，确保逻辑生效前不会出现不符合预期的显示：

/* 默认隐藏过期后才显示的内容 */
.demo {
  display: none;
}
/* 默认显示未过期时的内容 */
.demo1 {
  display: block;
}

2. 修正日期判断的JS逻辑（最容易出错的点） #

很多时候问题出在日期格式或者对比方式上，这里给你一个可靠的示例代码：

// 注意：JS的月份是从0开始的，所以10月要写9
const expirationDate = new Date(2024, 9, 15); // 设定过期日期为2024年10月15日
const currentDate = new Date(); // 获取当前系统日期

// 获取页面上的两个元素
const demoElement = document.querySelector('.demo');
const demo1Element = document.querySelector('.demo1');

// 核心判断逻辑
if (currentDate >= expirationDate) {
  // 日期已过期：隐藏hi2，显示hi1
  demo1Element.style.display = 'none';
  demoElement.style.display = 'block';
} else {
  // 日期未到：显示hi2，隐藏hi1
  demo1Element.style.display = 'block';
  demoElement.style.display = 'none';
}

3. 确认元素选择器与HTML匹配 #

检查你的HTML结构里的class是否和JS里的选择器完全一致，比如：

<p class="demo">hi1（过期后显示）</p>
<p class="demo1">hi2（未过期时显示）</p>

4. 确保JS在DOM加载完成后执行 #

如果你的JS代码写在<head>标签里，可能会因为DOM还没加载完找不到元素，导致逻辑失效。可以把JS放在</body>标签前，或者用DOM加载事件包裹：

document.addEventListener('DOMContentLoaded', function() {
  // 把上面的日期判断代码放在这里
});

第三步：测试验证 #

• 先把过期日期设成过去的日期，测试是否会自动切换到hi1；
• 再设成未来的日期，确认未过期时只显示hi2。

这样调整后，应该就能实现你想要的效果啦！

内容的提问来源于stack exchange，提问作者Roberto Flores