网站页面实现定时变灰
2020年4月4日，为表达全国各族人民对抗击新冠肺炎疫情斗争牺牲烈士和逝世同胞的深切哀悼，国务院在4月3日发布公告，决定2020年4月4日举行全国性哀悼活动。这公告一发布很多客户都发来了信息，要求我们这边帮忙把网站在4月4日当天调整为黑白色。
把网站换成黑白没问题，但几十个网站一起换还是需要时间吧，不可能每个网站都手动在4月4日0时0分进行切换，然后在4月5日0时0分又切换为原来的彩色，这时候我们就需要利用JS强大的功能，通过时间的判断对网站进行切换，这样就不用在清明假期还要加班加点吧代码切换下来了。
以下是定时切换的方法：
步骤一
先建立一个网页去色的css文件，名称根据自己喜好而定，我们暂时把它命名为 grayscale.css ，grayscale.css 的内容如下：
html,
body,
img{
filter: grayscale(100%);
filter: gray !important;
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
}这个很简单是吧，网页去色代码一般这个就足够了，当然，如果是政府网站，有的还会要求国徽的颜色不能变，领导的照片不能黑白等要求，这时候就不能直接用上面的代码了，需要根据实际情况去独立调整每块区域的 filter 。这里要求大家先建立一个css文件也是这原因，比较在CSS文件里面写样式总比在JS里面去的定义简单很多吧。
步骤二
页面加入定时切换代码，在指定的时间段里自动调取上面的CSS文件，注意这代码建议写在页面的 <head> 里面，注意：css的路径需要根据实际情况进行引用，JS里的"2020,3,4,0,0,0"代表是2020年4月4日0时0分，月份是需要-1的，不要写错了。
步骤三
由于IE10、11已经不支持CSS去色滤镜了，如果你想兼容IE10、11，还需引用 grayscale.js 插件，具体下载地址百度一下就有了。
添加 grayscale.js 的引用
步骤四
添加 grayscale.js 的执行语句，要注意的是grayscale.js的执行语句必须写到页面最底部，不然会无效。
注意：这里的 startDate 和 endDate 已经在上面定义了，可以直接拿来用，如果上面没有定义，还需参考步骤二进行定义。
用户登录
还没有账号？
立即注册