将网页设置成黑白色

方式 1:通过 js 可以设定指定时间,自动变灰以及复原

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 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>

方式 2:直接使用 CSS 处理,但是不能设置时间

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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);
}

参考链接

打赏
  • 版权声明: 本博客所有文章除特别声明外,均采用 Apache License 2.0 许可协议。转载请注明出处!
  1. © 2020 Liu Yang    湘ICP备20003709号

请我喝杯咖啡吧~

支付宝
微信