Top Stories

More From Our Blogs

通過代碼實現網頁變灰效果

2020 年 4 月 4 日,星期六,清明節。

我們的國家經歷了非常慘痛的時刻,很多英雄在救助他人的路上倒下,更有很多烈士英雄保衛人民的安危遇難,昨天全國下降半旗,北京時間 10 點全國默哀三分鐘,來致敬英雄們。同時昨天一切公共娛樂活動也都會停止,包括直播、綜藝、影視、游戲等等。

我也在這里也向全國抗擊新冠肺炎疫情斗爭犧牲的烈士和逝世的同胞表達深切的哀悼,向所有在抗戰在疫情前線的工作和醫護人員致敬。我們每一個人的平安面前,都是英雄的人墻。

網站變灰

昨天大家可以看到很多很多網站包括主頁和內容也都已經變成了灰色,比如百度、B 站、愛奇藝、CSDN 等等。

百度

大家可以看到全站的內容都變成灰色了,包括按鈕、圖片等等。這時候我們可能會好奇這是怎么做到的呢?

有人會以為所有的內容都統一換了一個 CSS 樣式,圖片也全換成灰色的了,按鈕等樣式也統一換成了灰色樣式。但你想想這個成本也太高了,而且萬一某個控件忘記加灰色樣式了豈不是太突兀了。

其實,解決方案很簡單,只需要幾行代碼就能搞定了。

其 CSS 內容為:

html {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}

單位的網站需要加上時間的限制,我在此基礎上改良了一下,代碼如下:

<script language="javascript">
    var today = new Date();
    var day=today.getDate();
    var c=4;//日期,例如4月4號,得到的就是當天的日期
    if (day == c) {     
        document.writeln(" <style type=\'text/css\'>     html {     FILTER: gray;     -webkit-filter: grayscale(100%);     } </style> ");
        
    }
    else {  
        
    }
</script>

Related Articles