js 特定日期全站变灰

明日清明,举国哀悼,不忘记每个因疫情逝去的人,在一些特殊的日子里,我们可能会用到这段代码。

逝者已矣,生者如斯

方法一

判断当前日期 + css 的 filter 滤镜,由于要照顾各浏览器的兼容性,css 最好要写全。

<script>
$(document).ready(function() {
    var today = new Date();
    var todayMonth = today.getMonth() + 1;
    var todayDate = today.getDate();
function gray(){
 $('body').css({
     "-webkit-filter":"grayscale(100%)",
     "-moz-filter":"grayscale(100%)",
     "-ms-filter":"grayscale(100%)",
     "-o-filter":"grayscale(100%)",
     "filter":"progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)",
     "_filter":"none"});
}
    if (todayMonth == 4 && todayDate == 4) {gray()} // 4 月 4 日
    if (todayMonth == 6 && todayDate == 4) {gray()}
    if (todayMonth == 12 && todayDate == 13) {gray()} // 12 月 13 日
})
</script>

方法二

用 grayscale.js,一句引用 + 一句调用就 ok 了,

但是 grayscale.js 在 Safari4 以下和 Chrome 中不支持对图片进行灰度处理!

<script src="https://j11y.io/demos/grayscale/grayscale.js"></script>
// 原生js
grayscale(document.getElementById("gray"));
// jq
grayscale($("body"));

定时后:

<script src="https://j11y.io/demos/grayscale/grayscale.js"></script>
<script>
$(document).ready(function() {
    var today = new Date();
    var todayMonth = today.getMonth() + 1;
    var todayDate = today.getDate();

    if (todayMonth == 4 && todayDate == 4) {grayscale($("body"));} // 对 body 执行
    if (todayMonth == 6 && todayDate == 4) {grayscale($("#gray"));} // 可指定 id class 或单一元素 em div ..
    if (todayMonth == 12 && todayDate == 13) {grayscale()} // 简写,全局
})
</script>

打赏

取消

感谢支持 Savalone !

扫码支持

打开支付宝扫一扫,即可进行扫码打赏哦


「本文由 Savalone 原创或搜集整理发布,转载请遵守 CC BY-NC-ND 4.0 许可!」
  • 5

  • 评论