JS实现网站哀悼
使用CSS滤镜实现灰度效果
通过CSS的filter属性将整个网站设置为灰度模式，适用于哀悼日的视觉调整。将以下代码添加到网站的全局CSS文件中：
html {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
}添加哀悼横幅或遮罩层
在页面顶部添加一个半透明的黑色横幅或全屏遮罩层，增强哀悼氛围。HTML和CSS示例如下：
<div id="mourning-banner"></div>#mourning-banner {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 9999;
pointer-events: none;
}动态控制哀悼模式
通过JavaScript动态切换哀悼样式，例如根据日期或后台配置启用：
// 检查特定日期或条件
const mourningDate = new Date('2023-12-13');
const today = new Date();
if (today.toDateString() === mourningDate.toDateString()) {
document.documentElement.classList.add('mourning-mode');
}配套CSS：
.mourning-mode {
filter: grayscale(100%);
}使用Cookie或LocalStorage记忆状态
若需允许用户手动关闭哀悼效果，可通过存储用户选择实现：
// 用户关闭哀悼模式后存储偏好
document.getElementById('disable-mourning').addEventListener('click', () => {
document.documentElement.classList.remove('mourning-mode');
localStorage.setItem('mourningDisabled', 'true');
});
// 页面加载时检查
if (!localStorage.getItem('mourningDisabled')) {
document.documentElement.classList.add('mourning-mode');
}兼容性处理
针对旧版本浏览器（如IE）提供备用方案：
// 检测filter支持并回退到背景色覆盖
if (!CSS.supports('filter', 'grayscale(100%)')) {
const fallback = document.createElement('div');
fallback.style.backgroundColor = 'rgba(0, 0, 0, 0.3)';
// 其他回退样式...
}注意事项
- 灰度滤镜可能影响图片和视频的显示效果，需测试关键页面元素。
- 遮罩层的
pointer-events: none确保用户可正常交互。 - 动态加载的内容（如AJAX）需额外监听并重新应用哀悼样式。
