一行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 现在移动端浏览器支持的都不错

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

关注我持续更新前端知识

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

一行 CSS 代码实现整个网站网页变黑白灰的效果
背景在全国哀悼日(吊念地震.疫情等),如果你也是站长,想做点什么,那么可以把网站编程黑白以示哀悼.下面分享一行代码实现整个网站网页编程黑白灰色的效果,主要是通过修改 CSS 的方式实现的(如果想要全 ...
解除网站变灰的方法,阻止网站变灰的方法,remove grayscale from website
起因网站会在一些特定的日子里变灰,但是长时间观看灰色的内容会导致眼睛的损害(bushi ![在这里插入图片描述](https://img-blog.csdnimg.cn/e4dc6667cb4643 ...
网站变灰代码，一行代码让网站整体变灰，wordpress网站一行代码全站变灰教程
在遇到特殊情况的时候,我们作为站长需要紧急将网站变灰的需求,在此小编给大家总结了几种方法,通过简单修改一下站点样式即可实现.一段代码让网站整体变灰.这里主要介绍的利用 filter: grayscal ...
网站变灰小妙招-几行代码搞定
网站变灰不需要重写样式,几行代码搞定: html{-webkit-filter:grayscale(100%);-moz-filter:grayscale(100%);-ms-filter:grays ...
【2020.04.04缅怀英烈，哀悼英雄】哀悼日网站变灰代码
哀悼日网站变灰代码.昨晚加班把公司的多有网站全变设置完成,缅怀英烈,哀悼英雄.记住你们,因为你们我们变得安全,谢谢你们. 在全站的CSS中写入以下代码: html { filter:progid:DX ...
html页面整体变灰,CSS + JS 网站变灰（变黑白），兼容所有浏览器。
有的网站可能需要用到全站黑白功能(一般常用于悼念日) ,最方便就是增加css代码,但经测试不兼容IE10.11浏览器,所以配合grayscale.js这个插件,可以完美兼容所有浏览器,这里我制作了个一 ...
如何使用css实现网站变灰效果
目录示例代码分析 grayscale saturate 总结参考为了悼念新冠病毒牺牲的烈士,很多网站都在清明节那天把网站设置成了灰色. 示例我选择了几个网站,先来看看它们是如何实现网站变灰效 ...
网站变灰CSS，多浏览器兼容版本
网站变灰CSS,多浏览器兼容版本: <style> body *{ -webkit-filter: grayscale(100%); /* webkit */ -moz-filter: g ...
“网站变灰”的代码实现
网站变灰为了表示哀悼,当天很多网站把主页和内容都变成了灰色,比如百度.B 站.爱奇艺.CSDN 等等. CSDN&&爱奇艺&&百度等实现: html.gray {- ...

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

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

最新文章

热门文章