一行css代码让整个网站变灰, 通过js控制定点触发和关闭

今天是5.12是个特殊的日子,有的时候吧 会把整个网站变灰的需求
这个我们用css过滤器 一行代码就能实现了

filter: grayscale(100%);

问题是 出在定点触发 这块,我们可以通过js 来实现
核心就是时间的判断这块

比如: 我们要在5.12凌晨十二点触发 到 5.13的凌晨关闭
就可以这样写

// 原生js 在三大框架中 都可以直接拿过去使用

let nowTime = new Date().getTime(),
      overTime = new Date("2022/05/12 00:00:00").getTime(),
      endTime = new Date("2022/05/13 00:00:00").getTime();
    if (nowTime > overTime && nowTime < endTime) {
      document.documentElement.style.cssText =
        "filter: grayscale(100%);";
    }

这里就不考虑什么样式的兼容性了 毕竟css3 现在移动端浏览器支持的都不错

然后就可以实现了 网站定点变灰和恢复了。省的运维人员半夜起来发包了

关注我 持续更新 前端知识