当前位置：首页 > JavaScript

JS实现哀悼

2026-04-03 20:44:07JavaScript

实现网页哀悼效果的方法

通过修改网页的CSS样式，可以实现整体变灰的哀悼效果。以下是常见的实现方式：

方法一：使用CSS filter属性

html {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
}

方法二：针对IE浏览器的兼容处理

html {
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}

方法三：JavaScript动态添加样式

document.addEventListener('DOMContentLoaded', function() {
    var style = document.createElement('style');
    style.innerHTML = 'html{filter: grayscale(100%);-webkit-filter: grayscale(100%);}';
    document.head.appendChild(style);
});

方法四：通过body类名控制

body.grayscale {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
}

document.body.classList.add('grayscale');

注意事项

这种效果会影响页面所有元素，包括图片、视频等
某些现代浏览器可能需要添加前缀确保兼容性
对于复杂的网页布局，可能需要额外调整以确保效果一致
可以通过JavaScript控制效果的持续时间和触发条件

扩展功能

如果需要定时或条件触发哀悼效果：

JS实现哀悼

// 定时启用哀悼效果
function enableMourningMode() {
    document.documentElement.style.filter = 'grayscale(100%)';
}

// 检查特定日期自动启用
var today = new Date();
if(today.getMonth() === 4 && today.getDate() === 12) { // 示例：5月12日
    enableMourningMode();
}

以上方法可以根据实际需求选择使用，CSS方法性能更好，JavaScript方法更灵活可控。

标签: JS