核心原理，使用css3的滤镜效果即可,filter grayscale 将整个界面变为黑白灰色调， 是CSS3新功能
方式1： 通过js可以设定指定时间，自动变灰以及复原
注意：以下代码需要引入jquery
<script>
// 1.得到当前的时间
var nowTime = new Date().getTime();
// 2.设置结束的时间 是 2020年4月5号凌晨
var overTime = new Date('2020/04/05 00:00:00').getTime();
// 3.如果当前时间小于了结束时间，简单说就是当前时间还没到4.5号 零点
if (nowTime < overTime) {
// 4.把html 设置灰色滤镜
$("html").css({
'-webkit-filter': 'grayscale(100%)',
'-moz-filter': 'grayscale(100%)',
'-ms-filter': 'grayscale(100%)',
'-o-filter': 'grayscale(100%)',
'filter': 'progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)',
'_filter': 'none'
});
}
</script>方式2： 直接使用CSS处理，但是不能设置时间
把代码加到<head></head>之间，即可直接实现全站灰色效果。
代码如下：
<!--网站变灰-->
<style>
html {
/* 滤镜效果 */
filter: grayscale(100%);
/* webkit内核 */
-webkit-filter: grayscale(100%);
/* 火狐内核 */
-moz-filter: grayscale(100%);
/* 微软内核 */
-ms-filter: grayscale(100%);
/* 欧朋内核 */
-o-filter: grayscale(100%);
/* ie专有滤镜 */
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}
</style>
