2020.4.4號全國疫情哀悼日網頁變灰色前端是如何實現的？-pink老師

今天是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>

這里深切哀悼抗擊新冠肺炎疫情犧牲烈士和逝世同胞， 加油武漢，加油中國。