本文介绍使用原生 javascript 控制横幅（div）的条件性显示：仅在周一（1）、周二（2）、周三（3）自动显示，并提供“×”按钮实现用户主动关闭，同时支持关闭状态持久化（刷新后不再显示）。

本文介绍使用原生 javascript 控制横幅（div）的条件性显示：仅在周一（1）、周二（2）、周三（3）自动显示，并提供“×”按钮实现用户主动关闭，同时支持关闭状态持久化（刷新后不再显示）。

要实现一个仅在工作日前三天（周一至周三）自动显示、且可手动关闭的提示横幅，需结合日期判断、DOM 操作与用户交互逻辑。核心思路是：默认隐藏横幅 → 页面加载时检查当前星期几 → 若符合要求则显示 → 点击关闭按钮后隐藏并记录用户偏好。

✅ 步骤一：HTML 结构（含语义化与无障碍支持）

保持结构简洁，为横幅添加 aria-live="polite" 提升可访问性，并确保关闭按钮具有明确语义：

<div class="header">
  <div id="banner" class="banner" role="alert" aria-live="polite" style="display: none;">
    <p>Attend the Chamber of Commerce meet and greet on Wednesday at 7:00 p.m.</p>
    <button id="closeBanner" class="close-button" aria-label="Close banner">×</button>
  </div>
</div>

⚠️ 注意：style="display: none;" 确保页面初始不可见，避免闪现（FOUC）；aria-live="polite" 让屏幕阅读器在横幅显示时自动播报内容。

✅ 步骤二：JavaScript 逻辑（含日期判断 + 关闭 + 状态持久化）

document.addEventListener("DOMContentLoaded", () => {
  const banner = document.getElementById("banner");
  const closeBtn = document.getElementById("closeBanner");

  // 获取今天是星期几（0=Sunday, 1=Monday, ..., 3=Wednesday）
  const today = new Date().getDay();

  // ✅ 条件：仅在周一(1)、周二(2)、周三(3)显示
  const shouldShow = today >= 1 && today <= 3;

  // 检查是否已被用户关闭（通过 localStorage 记录）
  const isClosed = localStorage.getItem("bannerClosed") === "true";

  // 若应显示且未被关闭，则显示横幅
  if (shouldShow && !isClosed) {
    banner.style.display = "block";
  }

  // ✅ 绑定关闭事件
  closeBtn?.addEventListener("click", () => {
    banner.style.display = "none";
    localStorage.setItem("bannerClosed", "true"); // 持久化关闭状态
  });
});

? 补充说明与最佳实践

• 星期索引对照表：getDay() 返回值为 0(Sun) ~ 6(Sat)，因此 1, 2, 3 对应 Monday–Wednesday —— 无需硬编码英文字符串，更可靠。
• 关闭状态持久化：使用 localStorage 实现跨会话记忆，用户一旦关闭，后续刷新或再次访问仍保持隐藏（如需每日重置，可改用 sessionStorage 或不存储）。
• 防错处理：添加 closeBtn?.addEventListener(...) 可选链操作，避免因 DOM 元素缺失导致脚本中断。
• CSS 建议（增强体验）：

  .banner {
    background: #2c3e50;
    color: white;
    padding: 12px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
  }
  .close-button {
    background: none;
    border: none;
    color: white;
    font-size: 20px;
    cursor: pointer;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .close-button:hover {
    background: rgba(255, 255, 255, 0.1);
  }

✅ 总结

该方案轻量、无依赖、语义清晰，兼顾功能需求（按日显示 + 手动关闭）与用户体验（无障碍支持、状态记忆、平滑交互）。只需将上述 JS 放入 <script></script> 标签或外部文件中，即可开箱即用。如需扩展为多语言、动态内容或定时开关，可在当前逻辑基础上叠加数据驱动层。