今天是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控制定点触发和关闭的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。