欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

各大网站变成灰色是怎么实现的？

程序员文章站 2023-12-22 16:50:10
...

今天是 2020 年 4 月 4 日，星期六，清明节。

新冠病毒肆虐全球的时刻，我们的国家收到重创，今天全国下降半旗，北京时间 10 点全国默哀三分钟，来致敬英雄们。同时今天一切公共娱乐活动也都会停止，包括直播、综艺、影视、游戏等等。

我也在这里也向全国抗击新冠肺炎疫情斗争牺牲的烈士和逝世的同胞表达深切的哀悼，向所有在抗战在疫情前线的工作和医护人员致敬。

今天看到很多网站变成灰色，主要是各大*网站，BAT互联网网站，淘宝京东各大商场网站，视频网站，游戏网站等等...

各大网站变成灰色是怎么实现的？

各大网站变成灰色是怎么实现的？

各大网站变成灰色是怎么实现的？

各大网站变成灰色是怎么实现的？

腾讯官网、12306铁路、的css样式加载head里面：

 <style type="text/css">
    html{
      filter: grayscale(100%);
      -webkit-filter: grayscale(100%); /* webkit */
      -moz-filter: grayscale(100%); /*firefox*/
      -ms-filter: grayscale(100%); /*ie9*/
      -o-filter: grayscale(100%); /*opera*/
      filter: url("data:image/svg+xml;utf8,#grayscale");
      filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
      -webkit-filter: grayscale(1);
    }
  </style>

小米的操作最简单： 

<html lang="zh-CN" xml:lang="zh-CN" style="filter: grayscale(100%);">

京东的样式用JS定时一天：

<script>
    // 直出代码
    window.reqFulfilled = function (config) {
      if (config.name && config.name.indexOf('jsonpMorePromotePrice') !== -1) {
        config.retryTimes = 0
        config.timeout = 500
      }
      return Promise.resolve(config)
    }
    var waitForEl = function(selector, callback) {
      if ($(selector).length) {
        callback()
      } else {
        setTimeout(function() {
          waitForEl(selector, callback);
        }, 100)
      }
    }

    waitForEl('#settleup .dropdown-layer', function() {
      $('#settleup .dropdown-layer').remove()
      // work the magic
    })

    var isDuringDate = function (beginDateStr, endDateStr) {
      var curDate = new Date()
      var beginDate = new Date(beginDateStr)
      var endDate = new Date(endDateStr)

      if (curDate >= beginDate && curDate <= endDate) {
          return true
      }
      return false
    }

    $html = $('html')
    $html.toggleClass('o2_gray', isDuringDate('2020/04/04 00:00:00', '2020/04/04 23:59:59'))
</script>
<style>
    .o2_ie8 .more2_international {
        filter: progid:dximagetransform.microsoft.alphaimageloader(src='//storage.360buyimg.com/mtd/home/more_international1575014601797.png',sizingMethod='scale');
        background: none;
    }
    .mod_help_cover {
        background-image: none;
    }
    .dropdown:hover .cw-icon {
        border-bottom: 1px solid #e3e4e5;
    }
    html.o2_gray {
      -webkit-filter: grayscale(100%);
      filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    }
</style>

爱奇艺的JS定时 ：

<script>
    function isDateBetween(start, end) {
        var startDate = new Date(start)
        var endDate = new Date(end)
        var current = new Date()

        return current >= startDate && current < endDate
    }

    (function() {
        var inGrayRange = isDateBetween('2020-04-04 00:00:00', '2020-04-05 00:00:00');
        //var inGrayRange = true
        var grayCss = document.getElementById('J-gary-bg');
        var ieGuessULile = document.getElementsByClassName('J-ie-guess-u-like');

        window.inGrayRange = inGrayRange;        
        if (!inGrayRange && grayCss) {
            grayCss.remove();
        }
        if (inGrayRange && ieGuessULile && ieGuessULile.length) {
            for (var i = 0; i< ieGuessULile.length; i++) {
                ieGuessULile[i].style.display = "none";
            }
        }
    })()
</script>

 

相关标签： dedecms

上一篇：

下一篇：

推荐阅读