1. 前言

今天是4月4号，清明节，2020是极不平凡的一年，这一年发生了许多事；

为表达全国各族人民对抗击新冠肺炎疫情斗争牺牲烈士和逝世同胞的深切哀悼，国务院决定，2020年4月4日举行全国性哀悼活动。在此期间，全国和驻外使领馆下半旗志哀，全国停止公共娱乐活动。4月4日10时起，全国人民默哀3分钟，汽车、火车、舰船鸣笛，防空警报鸣响。

不少网站在这个特殊的日子，都将网站变灰了，是如何实现的？

2. 代码

主要就是依赖一个css属性：

.gray {
  filter: grayscale(.95);
}

然后利用js判断日期，将html标签加上该css类：

let date = new Date();
let d = date.getDate();
let m = date.getMonth() + 1;

if (d === 4 && m === 4) {
    document.documentElement.classList.add('gray');
}

当然，你可以直接利用js将HTML加上行内css，而不必要写一个css类；

3. 更好的版本

下面代码可直接使用，且可定义更多日期：

<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>

<!--全站变灰-->
<script>
$(function() {
    var myDate = new Date;
    var mon = myDate.getMonth() + 1; //获取当前月
    var date = myDate.getDate(); //获取当前日
    var days=['4.4','5.12','7.7','9.18','12.13']; //在这里自定义日期
    for (var day of days) {
        var d=day.split('.');
        if (mon == d[0] && date == d[1]) {
            var gray='grayscale(100%)';
            $("html,body").css({"filter":'gray !important;',"filter":"progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)","filter":gray,"-webkit-filter":gray,'-moz-filter':gray,'-ms-filter':gray,'-o-filter':gray});
            break;
        }
    }
});
</script>
<!--全站变灰-->