如何让横幅仅在周一至周三显示并支持手动关闭-html教程-PHP中文网

如何让横幅仅在周一至周三显示并支持手动关闭

本文介绍使用原生 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  {
    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);
}