本文介绍如何使用 html、css 和 javascript 实现一个仅在周一、周二、周三自动显示的提示横幅，并提供“×”按钮实现即时隐藏，同时支持用户关闭后不再显示（基于 localstorage 持久化状态）。
本文介绍如何使用 html、css 和 javascript 实现一个仅在周一、周二、周三自动显示的提示横幅，并提供“×”按钮实现即时隐藏，同时支持用户关闭后不再显示（基于 localstorage 持久化状态）。
要实现「工作日前三天（周一至周三）自动显示 + 可关闭 + 关闭后记忆状态」的横幅功能，需结合日期判断、DOM 控制与本地存储。以下为完整、健壮的实现方案：
✅ HTML 结构（保持语义化与可访问性）
<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;"确保默认隐藏；aria-live="polite"提升屏幕阅读器体验；role="alert"表明其为重要通知。
✅ 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();
const isTargetDay = today >= 1 && today {
banner.style.display = 'none';
localStorage.setItem('bannerClosed', 'true'); // 持久化关闭状态
});
// 【可选增强】若用户刷新页面后当天已过（如周三下午关闭），次日应重新显示 → 可扩展为存储关闭日期并比对
});
✅ 推荐 CSS 样式（提升视觉与交互体验）
.banner {
background-color: #2c3e50;
color: white;
padding: 12px 20px;
text-align: center;
position: relative;
font-size: 14px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.close-button {
background: none;
border: none;
color: white;
font-size: 18px;
cursor: pointer;
position: absolute;
top: 8px;
right: 12px;
width: 28px;
height: 28px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.2s;
}
.close-button:hover {
background-color: rgba(255,255,255,0.15);
}
/* 响应式：小屏下调整间距 */
@media (max-width: 768px) {
.banner { font-size: 13px; padding: 10px 16px; }
}
? 注意事项与最佳实践
-
星期索引校准：
Date.prototype.getDay()返回0(Sun)–6(Sat)，因此周一=1、周二=2、周三=3 —— 原答案中注释误写为4 = Wednesday，已修正。 -
避免重复显示：使用
localStorage记录关闭状态，比仅靠内存变量更可靠；如需按周重置，可存储关闭日期并每日校验。 -
无障碍优先：确保按钮有
aria-label，横幅有role="alert"和aria-live，方便辅助技术识别。 -
性能友好：使用
DOMContentLoaded替代window.onload，避免等待图片等资源加载，提升首屏响应速度。
通过以上实现，横幅将智能、可访问、可维护地服务于指定工作日场景，兼顾用户体验与代码健壮性。
