今天是4.4疫情哀悼日,纪念疫情期间牺牲的烈士和逝世同胞,因此大部分网站颜色都变灰色了,我们前端是如何实现的呢?
非常简单,使用css3的滤镜效果即可。filter grayscale 将整个界面变为黑白灰色调, 是CSS3新功能
注意:以下代码需要引入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%)',
// ie滤镜
'filter': 'progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)',
// ie6 等低版本浏览器不需要加滤镜
'_filter': 'none' });
}
</script>
这里深切哀悼抗击新冠肺炎疫情牺牲烈士和逝世同胞, 加油武汉,加油中国。