网页秒变灰色方法
重大事件,表示哀悼,通常会开启灰度模式,即网站打开没有丰富的色彩,只有黑白灰,具体方法如下:
方法一:通过js可以设定指定时间,自动变灰以及复原(复制到网站后台统计代码处)
<script> // 1.得到当前的时间 var nowTime = new Date().getTime(); // 2.设置结束的时间 是 2024年04月05号凌晨 var overTime = new Date('2024/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>
方法二:直接使用CSS处理,不能设置时间,只能手动去除。
<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>