当前位置：首页 > JavaScript

JS实现网站哀悼

2026-04-07 14:14:29JavaScript

使用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）提供备用方案：

JS实现网站哀悼

// 检测filter支持并回退到背景色覆盖
if (!CSS.supports('filter', 'grayscale(100%)')) {
    const fallback = document.createElement('div');
    fallback.style.backgroundColor = 'rgba(0, 0, 0, 0.3)';
    // 其他回退样式...
}