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

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

不多说,直接上代码:

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

    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样式:

html{
    filter: grayscale(1);
}

为啥是html?

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

举国哀悼-定时设置网站全黑白