一夜黑白——互联网人的悼念方式

2020年4月4日 00:00 — 24:00

这一天，14亿人都在做着同一件事，
这一天，14亿人都在追忆那些过往，
这一天，14亿人共同祈愿英雄不朽，逝者安详。

4月3日国务院今天发布公告，为表达全国各族人民对抗击新冠肺炎疫情斗争牺牲烈士和逝世同胞的深切哀悼，决定2020年4月4日举行全国性哀悼活动。

一夜之间，许多网页变成了“黑白界面”，我想这是互联网人不约而同自发进行的特殊志哀活动。

时间回到 2020年的1月20日 ——
新型冠状病毒引发的肺炎疫情由湖北武汉爆发，席卷华夏大地，一场全国范围的抗疫总体战、阻击战就此打响。

在这段时间我们揪心病患，担心数据，关心医护……全国各行各业用自己的能力为抗疫尽己所能，甚至拼尽全力。

• 白衣天使 放下翅膀，披上战甲，摇身一变 “白衣战士”， 奔赴疫情一线，让我重新理解了 “医者仁心” “救死扶伤”
• 建筑大师 雷神山医院、火神山医院，仅仅数日，拔地而起，可谓天降奇兵
• 司机大哥 无论是货车、公交还是的士，甚至私家车，司机大哥们架起了物资与人员运输的高速路，接送医护人员、配送防疫物资，你们一往无前
• 工人师傅 多少企业临时转型转产生产防疫物资，工人师傅们加班加点努力生产，只希望尽早送达需要的人身旁
• ……

互联网人又做了什么呢？
各大互联网公司为疫情重点地区捐赠物资，相关平台为抗疫提供绿色通道。一些互联网从业人员也自发研发了相关平台发布疫情物资需求、公布确诊患者行程信息……

每一个行业都有自己的力量，都在疫情发生时扛起了一片天，笔者作为湖北人，由衷的想表达一声感谢，谢谢你们为湖北拼过命！🙏

不过好在疫情的阴霾即将散尽，明天（2020年4月5日）黑白页面又会恢复彩色，期待山河无恙，国泰民安！

---

作为互联网人，接下来的篇幅聊一点技术话题：

“一夜黑白”是怎么实现的？

Q: 突然一下子黑白了，是需要换所有素材和样式吗？

不需要的，一个CSS样式（filter: grayscale(100%)）即可搞定

这里所说的CSS样式是平时使用频次较低的CSS滤镜之“灰度滤镜”（grayscale），当往其中传入的值是 100% 时便时黑白啦。

对一张图片加上这个滤镜是什么样的效果？

grayscale(00%)	grayscale(30%)	grayscale(60%)	grayscale(100%)

接下来从一些网站上“偷”了一些样式代码 ↓↓↓

• 腾讯视频 CSS样式

  html {
  	filter: gray;
  	-webkit-filter: grayscale(100%);
  	filter: grayscale(100%);
  }
  

• 芒果TV CSS样式

  .gray {
  	-webkit-filter: grayscale(100%);
  	filter: grayscale(100%);
  	-webkit-filter: grey;
  	filter: gray
  }
  

• 爱奇艺 CSS样式

  html {
  	filter: url("data: image/svg xml;
  	utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");
  	filter: progid: DXImageTransform.Microsoft.BasicImage(grayscale=1);
  	-webkit-filter: grayscale(1);
  }
  

  发现爱奇艺好像与众不同，中间那一长串是啥？
  这里我们解锁一项新的滤镜——SVG滤镜，用这个滤镜是为了解决部分浏览器的兼容问题，将上面代码中的SVG滤镜抽取出来：

  <svg xmlns="http://www.w3.org/2000/svg">
  <filter id="grayscale">
  	<feColorMatrix type="matrix" values="
  		0.3333 0.3333 0.3333 0 0
  		0.3333 0.3333 0.3333 0 0
  		0.3333 0.3333 0.3333 0 0
  		0 0 0 1 0"/>
  </filter>
  </svg>
  

  爱奇艺使用的是ColorMatrixFilter（颜色矩阵滤镜），可以简单粗暴的将其理解为——它把显示颜色中的红、绿、蓝都设置成了原始颜色的33.33%。
  这里涉及矩阵计算，这里就先略过了，感兴趣的朋友可以看一下ColorMatrixFilter相关内容
  咱们可以简单的看一下效果——

  操作	效果	矩阵
  默认		1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0
  去掉红		0 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0
  去掉绿		1 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 1 0
  去掉蓝		1 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 1 0
  去掉红绿蓝		0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0
  灰度化		0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0

  这里提供一个可以测试SVG ColorMatrixFilter 的地址，大家可以去体验一下。

Q: 怎么确定时间呢？什么时候黑白，什么时候还原呢？

关于这个问题，我能想到的方案有三个：

• 方案一：前端时间检验，动态修改结构与样式

  我们来看一下爱奇艺是怎么处理的

  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');
      window.inGrayRange = inGrayRange;        
      if (!inGrayRange && grayCss) {
          grayCss.remove();
      }
  })()
  

  翻译过来是这样：
  判断当前的本地时间是否在 2020-04-04 00:00:00 - 2020-04-05 00:00:00，如果是就保持不变，如果不是就移除“置灰”的样式（对应的就是上文 “爱奇艺 CSS样式” ）。

  没错，就只这样一个简单的逻辑。但是存在一定的问题——本地时间是可以修改的。如果用户修改了当前时间，刷新页面会立刻被 “打回原形”。

  

  所以非常不推荐这种技术方案！ 试想这种方案如果运用在双11这样的活动上会有多恐怖（每天都是双11）。

• 方案二：前端通过接口获取服务器时间，动态修改结构与样式

  本地时间可以修改，但是服务端时间不可以，以服务端时间作为标准是一个不错的方案。

  前端可以通过接口得到服务端时间，作为判断标准。

  例如芒果TV某接口得到的数据结构如下：

  {
      "msg": "",
      "code": 200,
      "cost": null,
      "data": {
          "topList": [],
          "suggest": []
      },
      "pt": null,
      "ty": null,
      "sort": null,
      "version": "v4.14.29",
      "du": null,
      "port": 9502,
      "fmsId": null,
      "serverTime": 1585987710343,
      "seqid": ""
  }
  

  其中的serverTime就是服务端时间。当然了，芒果TV是否用这个字段进行了检验不敢妄加揣测，但是是可行的技术方案

• 方案三：定时发布版本，置灰版与正常班

  两个完全割裂的版本不用逻辑判断，直接进入线上最新版本就好

这三种方案只是我能想到的，还有其他方案暂时没有想到，如果您愿意可以私信或留言交流

---

最后，再次缅怀在疫情中逝去的生命，愿天堂没有病魔。也祝愿还在和病魔斗争的患者早日康复。