如何定时开启全站变灰代码

DurkBlue 2020-04-04 2512 抢沙发

默认

摘要： 为表达全国各族人民对抗击新冠肺炎疫情斗争牺牲烈士和逝世同胞的深切哀悼，国务院今天发布公告，决定2020年4月4日举行全国性哀悼活动。在此期间，全国和驻外使领馆下半旗志哀...

为表达全国各族人民对抗击新冠肺炎疫情斗争牺牲烈士和逝世同胞的深切哀悼，国务院今天发布公告，决定2020年4月4日举行全国性哀悼活动。在此期间，全国和驻外使领馆下半旗志哀，全国停止公共娱乐活动。4月4日10时起，全国人民默哀3分钟，汽车，火车，舰船鸣笛，防空警报鸣响。明天各大网站都将变为灰色，以表示哀悼。为了更多的网友可以达成这种效果，在哀悼日可以表达一份哀悼。今天临时上网教大家怎么开启全站变灰。

在后台设置中，开启自定义css，然后复制如下代码：

CSS

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

这是纯css实现的，不需要任何插件。在来一个js代码，可以实现定时开启：

JavaScript

<script>(function() {
 var date = new Date();
 if (date.getMonth() === 3 && date.getDate() === 4 && date.getFullYear() === 2020)
 $('head').append('<style>html{filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%);}</style>')})();</script>

代码的意思就是在2020年4月4日在html和body的标签添加一个style，实现全站变灰，有些人可能会问，既然4月4日，为什么代码中写的是3月？其实getMonth返回的是0-11，所以在3就等于4。最好把js代码放在head标签之内，最好不要放在网页底部，因为浏览器需要读取js代码，然后在给标签赋予style值，如果放在底部在刷新网站的时候会有一个短暂闪屏。