风也雨忆笙

看到分享社区有小伙伴设置了网站全站变灰，那我也来一个进阶设置吧！用jquery的方式定时实现全站黑白。

首先看到的是这个小伙伴的文章：https://www.igetyou.cn/archives/43/，然后我就稍加修改，嘿嘿！

不多说，直接上代码：

将以下代码直接复制到自定义JS中即可，理论所有网站都适用。

1
2
3
4
5
6
7
8
9
10
11
12
13
ncov_gray();

function ncov_gray() {
    var date = new Date();
    this.year = date.getFullYear();
    this.month = date.getMonth() + 1;
    this.date = date.getDate();

    var currentTime = this.year + "." + this.month + "." + this.date;
    if (currentTime == "2020.4.4") {
        $("html").css("filter", "grayscale(1)");
    }
}

稍微解释一下，我是通过JS的Date函数获取年月日，当年月日等于2020.4.4的时候调用jQuery为html标签设置css样式：

1
2
3
html{
    filter: grayscale(1);
}

为啥是html?

因为我发现那位小伙伴用body其实是有一点缺点的，在handsome主题下，如果我们设置了背景图片，那么全站变灰仅限于盒子模型，图片并没有变化。而handsome主题的自定义样式是给html标签设置了一个名位bg的class。