Top Stories

More From Our Blogs

通过代码实现网页变灰效果

2020 年 4 月 4 日,星期六,清明节。

我们的国家经历了非常惨痛的时刻,很多英雄在救助他人的路上倒下,更有很多烈士英雄保卫人民的安危遇难,昨天全国下降半旗,北京时间 10 点全国默哀三分钟,来致敬英雄们。同时昨天一切公共娱乐活动也都会停止,包括直播、综艺、影视、游戏等等。

我也在这里也向全国抗击新冠肺炎疫情斗争牺牲的烈士和逝世的同胞表达深切的哀悼,向所有在抗战在疫情前线的工作和医护人员致敬。我们每一个人的平安面前,都是英雄的人墙。

网站变灰

昨天大家可以看到很多很多网站包括主页和内容也都已经变成了灰色,比如百度、B 站、爱奇艺、CSDN 等等。

百度

大家可以看到全站的内容都变成灰色了,包括按钮、图片等等。这时候我们可能会好奇这是怎么做到的呢?

有人会以为所有的内容都统一换了一个 CSS 样式,图片也全换成灰色的了,按钮等样式也统一换成了灰色样式。但你想想这个成本也太高了,而且万一某个控件忘记加灰色样式了岂不是太突兀了。

其实,解决方案很简单,只需要几行代码就能搞定了。

其 CSS 内容为:

html {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}

单位的网站需要加上时间的限制,我在此基础上改良了一下,代码如下:

<script language="javascript">
    var today = new Date();
    var day=today.getDate();
    var c=4;//日期,例如4月4号,得到的就是当天的日期
    if (day == c) {     
        document.writeln(" <style type=\'text/css\'>     html {     FILTER: gray;     -webkit-filter: grayscale(100%);     } </style> ");
        
    }
    else {  
        
    }
</script>

Related Articles