让网站变灰懒人版

为表达全国各族人民对抗击新冠肺炎疫情斗争牺牲烈士和逝世同胞的深切哀悼,国务院决定,2020年4月4日举行全国性哀悼活动。在此期间,全国和驻外使领馆下半旗志哀,全国停止公共娱乐活动。4月4日10时起,全国人民默哀3分钟,汽车、火车、舰船鸣笛,防空警报鸣响。

国务院公告:4月4日举行全国性哀悼活动

于是就想着跟一波风;虽然本站并没有多少人访问。

本来想着 0 点准时放代码,然后清除 CloudFlare 缓存,一天以后再去除。可是那样太麻烦了,于是就想着用 js 判断下日期然后直接 document.write 一个带有变灰 CSS 代码的 <style> 标签。这样不仅可以做到准时准点变灰,还顺带适配不同的时区。下次再需要变灰就改一下日期即可;完整代码如下:

  let today = new Date().toLocaleDateString();
  // document.body.innerHTML += today;
  if (today == "04/04/2020" || today == "4/4/2020") {
    // change the date to today to see instant effect
    document.body.innerHTML +=
      "<style>html,body{filter: grayscale(75%); -webkit-filter: grayscale(75%); -moz-filter: grayscale(75%); -ms-filter: grayscale(75%); -o-filter: grayscale(75%);filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=0.75);}</style>";
  }

由于我是 CVM 开发模式高级工程师,代码来源如下:

上述代码演示:https://codesandbox.io/s/eloquent-keldysh-on8fq;灰度设置成了 75%,看起来其实没多大区别,不喜欢改成 100% 即可。

更新:
- 加上了听说适配 IE(反正百度首页也是这样用的)的 CSS 写法(然而对 IE11 还是无效)
- 添加了 today = "4/4/2020" 的表述;部分设备会输出这个格式的日期,而不是 04/04/2020(说的就是你,小米)

点赞
  1. TCP404说道:

    可以用today.replace()替换掉啊

    1. 惶心说道:

      没有听明白,大佬详细说说

发表评论

电子邮件地址不会被公开。必填项已用 * 标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据