今天是4.4疫情哀悼日，紀(jì)念疫情期間犧牲的烈士和逝世同胞，因此大部分網(wǎng)站顏色都變灰色了，我們前端是如何實(shí)現(xiàn)的呢？

核心原理，使用css3的濾鏡效果即可。filter grayscale 將整個(gè)界面變?yōu)楹诎谆疑{(diào)， 是CSS3新功能

方式1：? 通過js可以設(shè)定指定時(shí)間，自動(dòng)變灰以及復(fù)原

注意：以下代碼需要引入jquery

<script>

// 1.得到當(dāng)前的時(shí)間

var nowTime = new Date().getTime();

// 2.設(shè)置結(jié)束的時(shí)間 是 2020年4月5號(hào)凌晨

var overTime = new Date('2020/04/05 00:00:00').getTime();

// 3.如果當(dāng)前時(shí)間小于了結(jié)束時(shí)間，簡(jiǎn)單說就是當(dāng)前時(shí)間還沒到4.5號(hào) 零點(diǎn)

if (nowTime < overTime) {

// 4.把html 設(shè)置灰色濾鏡

$("html").css({

'-webkit-filter': 'grayscale(100%)',

'-moz-filter': 'grayscale(100%)',

'-ms-filter': 'grayscale(100%)',

'-o-filter': 'grayscale(100%)',

// ie濾鏡

'filter': 'progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)',

// ie6 等低版本瀏覽器不需要加濾鏡

'_filter': 'none' });

}

</script>

沒有添加代碼前：

添加代碼后：

方式2：? 直接使用CSS處理，但是不能設(shè)置時(shí)間

?<style>

????html?{

??????/*?濾鏡效果?*/

??????filter:?grayscale(100%);

??????/*?webkit內(nèi)核?*/

??????-webkit-filter:?grayscale(100%);

??????/*?火狐內(nèi)核?*/

??????-moz-filter:?grayscale(100%);

??????/*?微軟內(nèi)核?*/

??????-ms-filter:?grayscale(100%);

??????/*?歐朋內(nèi)核?*/

??????-o-filter:?grayscale(100%);

??????/*?ie專有濾鏡?*/

??????filter:?progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);

????}

??</style>

這里深切哀悼抗擊新冠肺炎疫情犧牲烈士和逝世同胞， 加油武漢，加油中國。