2020.4.4号全国疫情哀悼日网页变灰色前端是如何实现的？-pink老师

xiaoqiang001 2021-08-27 原文

今天是4.4疫情哀悼日，纪念疫情期间牺牲的烈士和逝世同胞，因此大部分网站颜色都变灰色了，我们前端是如何实现的呢？

核心原理，使用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处理，但是不能设置时间

<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>